shadcn.io is not affiliated with official shadcn/ui
Was This Useful Feedback Blog Block for Vue
A Was this useful? widget: Yes and No toggles with rolling counts, a No that opens reason chips, a note and a Send button in a panel that never changes height, and recent reader notes with star ratings.
Installation
Overview
A feedback widget for Vue with Ark UI, written for the Docsmoor blog, a documentation team's notes on writing docs. In a split behind a divider, the start holds the question, a Yes and a No toggle with a rolling count each (press the pressed one again to take it back) and a panel under them. Yes says thanks at once. No opens reason chips (Too long, Too basic, Unclear), an optional note and a Send feedback button; sending says thanks in place and moves focus there. The panel keeps the height of its fullest state, so nothing on the page moves. The end of the split lists recent reader notes with a read-only star rating in your foreground colour. The counts and the notes are example data, and your answer stays on this page. It uses ToggleGroup, Textarea, Rating, ShineButton, SlidingNumber, Avatar and Guides.
FAQ
What happens when I press No?
The panel's first line asks "What went wrong?" and three reason chips, an optional note field and Send feedback appear in the space the panel already holds. Sending replaces them with "Thanks, noted" and focuses that line so a screen reader hears it. Pressing Yes or No again, or the pressed one to take it back, starts over. The panel is the height of the form from the first moment, so the widget and the notes beside it don't move.
Does anything get sent?
No. The vote, the reasons and the note stay in the component's state, and the code marks where your backend call goes. The counts start from example numbers (BASE) and add one for your own vote; the reader notes are example data, labelled as such.
How do I change the notes and the ratings?
Edit NOTES: each has an author, a fixed ISO date, a star count from one to five and the text. The stars are read-only and drawn in your foreground colour; their value is spoken as "Rated 4 out of 5" before the note, and the stars themselves are hidden from assistive technology.
How does it fit on a phone?
The widget comes first with the toggles and the panel, then the reader notes under a hairline. The reason chips wrap, and the note field and the button take their own rows.