shadcn.io is not affiliated with official shadcn/ui
Satisfaction Rating Chat Block for Ark UI
A finished support thread that ends with a three-step survey: a named star rating, reasons that depend on the rating, and a note with an email-me switch, then Send feedback posts a summary line.
Installation
Overview
Ask how a support chat went, with this satisfaction survey for React with Ark UI. The thread has ended: Dilys fixed a mailing address and the last line says "Dilys closed this chat". Where a composer would be, a survey card takes its place at a held height and asks three things, one step at a time under a step indicator: a Rating with a name for every value and arrow keys, reasons that depend on the stars (praise for 4 or 5, what went wrong for 1 to 3, as pressable chips in a Toggle Group), and a note of up to 200 characters with a Switch to email yourself a copy. Back and Next move between steps and "Send feedback" is the one Shine Button, shown on the last. Sending posts a system line such as "You rated Dilys 4 of 5: Quick resolution, Friendly" and turns the card into a list of your answers. Framed by Guides, it moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
Everything. The answers live in the component's state and the summary line is built from them; the switch asks for a copy but nothing is emailed, as the card says. To wire it for real, send stars, reasons, note and copy to your help desk in send where the comment says so, and let your service post the closing line.
Why do the reasons change with the rating?
Because "Slow to reply" makes no sense under five stars. A pure helper returns the praise set for 4 or 5 stars and the problems set for 1 to 3. If you change the rating, any pressed reason that no longer fits is dropped, so the summary never mixes the two.
How does the star rating work with a keyboard?
Focus the rating and use the arrow keys to move between 1 and 5; each value is read as, for example, "4 of 5, Good", and the word is shown beside the stars. Next stays at the first step until you have chosen a rating, and says so.
Does the card change height between steps?
No. The three steps and the final list are drawn in one grid cell and the unused ones are hidden and inert, so the card always takes the height of the tallest and the thread above it never jumps.
Is it usable with a keyboard and a screen reader?
Moving to a step moves focus to the survey's heading, the step indicator marks the current step and says which are done, the note's count is tied to the field, and the single polite status line announces each change. The log is a focusable region announced as a log.