shadcn.io is not affiliated with official shadcn/ui
Survey Completed Success Block for React
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 Base 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.
Related
- Pro
Feedback Survey Onboarding
One choiceA one-question survey in a non-modal popover under a Quick question tab on a drawn app bar, with six radio answers, a text box for Other that is always there, and a sentence that says what the answer does.
- Pro
Survey Popup Notification
Asks and consentA product analytics tool's three-question survey drawn in the corner of its dashboard: answer rows, a word and a bar for where you are, Back and Next, a thank-you with your answers, and Replay survey.
- Pro
Application Pipeline Success
People and approvalsA confirmation page for a job application: the role, place and reference with a copy button, and a vertical list of four hiring stages where each one opens to say what happens in it and how long it usually takes.
- Pro
Settings Version Sheet Success
Saves and updatesA thermostat settings page with the sheet that says what a save changed, shown open: three settings from old value to new, the version and its time, a Done button and a Revert to version 13 that redraws the page.
- Pro
Trial Timeline Success
Plans and limitsA trial confirmation page: fourteen day cells on shared hairlines with today filled and the reminder day marked, the first charge named, a switch for the reminder email, and the three features the trial unlocks.
- Pro
First Project Success
Account lifecycleA confirmation page for a first project: the new project as three facts, four firsts in a grid of hairline cells with the next one lit and each pickable to read what it takes, one Open the project button and a thin fall of confetti that plays once.