shadcn.io is not affiliated with official shadcn/ui
Customer Feedback Chat Block for React Aria
A survey that talks: an eleven-button 0 to 10 scale you can change, a follow-up with tag chips that depends on your score, a comment, and a summary card kept in the demo only.
Installation
Overview
Ask for a score without sending anyone to a form, with this customer feedback chat for React with React Aria. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Tellhurst, a booking tool. The bot asks how likely you are to recommend it and the message holds eleven radio buttons, 0 to 10, with "Not likely" and "Very likely" under the ends; you can change your score until the next question appears. The follow-up depends on it: 0 to 6 asks what fell short, 7 to 8 what would make it a 10, 9 to 10 what you like most, each with four tag chips you can press and a Continue button. Then the bot asks if there is anything else (your next message is the comment) and ends with a Data List summary of the score, the tags and the comment, marked as kept in this demo only. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. Messages are Message and Bubble rows. The frame is ruled by Guides, and everything moves with CSS only. A start for NPS in a chat widget.
FAQ
What stays in the page, and how do I make it real?
Everything. The questions, the tags and the summary are typed in the file, the answers live in the page's state, and nothing is stored or sent. To wire it for real, save the score, tags and comment to your survey tool where the summary is built, and keep the branching by score on your side.
Why 0 to 10 and not stars?
Net Promoter Score asks for a number from 0 to 10, and the buttons say so in words at each end. Stars belong to the satisfaction block. The scale is a group of native radio buttons, so arrow keys move between them and the choice is announced with the group's label.
How does the follow-up depend on the score?
Three bands: 0 to 6 asks what fell short, 7 to 8 what would make it a 10, and 9 to 10 what you like most, each with four typed tags. Changing your score before the follow-up appears restarts the short wait; once it appears the scale is locked, because the conversation has moved on.
What happens to my comment?
After Continue the bot asks if there is anything else and the next message you write is the comment. It goes into the summary card, whose last line says it is kept in this demo only. Messages sent before that get a hint about what to do next.