shadcn.io is not affiliated with official shadcn/ui
Survey Completed Success Block for Ark UI
A full-height confirmation after a survey: your 0 to 10 answer shown as an ordered scale with your 9 marked, a reward code with a real copy button, and one line about what the last survey changed.
Installation
Overview
Thank people for a survey, with this survey completed page for React with Ark UI. It is the Pollroost screen after someone answered, a whole screen with the page's rails and one band across it, in a medium column whose text starts at the reading edge. A check in a muted tile, the heading and a sentence come first, then a corner-marked panel in three bands: the answer on a 0 to 10 scale as an ordered list of eleven numbers with your 9 filled (it scrolls sideways on a narrow phone), a reward code with a Copy Button that really copies it, and one line about what the last survey changed. The one primary is the Shine Button Back to home, pinned to the foot of a phone's screen. For survey, NPS and feedback tools.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was saved. The question, the answer (9), the reward code and the line about what changed are typed constants. The copy button copies the sample code for real. To wire it, render the answer from the saved response, issue a single-use reward code on your server, and take the changelog line from your product notes.
How is the scale read by a screen reader and a keyboard?
It is an ordered list of the numbers 0 to 10, and your answer is marked as the current item and also filled, so colour is not the only signal. The line above says "9 of 10, likely to recommend". The scroll area on a narrow phone is a focusable region, so arrow keys can move it without a mouse.
What do the words next to the score mean?
They follow the usual net promoter bands: 9 and 10 are likely to recommend, 7 and 8 neutral, and 0 to 6 unlikely. Change the band edges in one function if your survey differs.