shadcn.io is not affiliated with official shadcn/ui
Was This Useful Feedback Blog Block for React
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 React with Base 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.
Related
- Pro
Reaction Bar Blog
Reader feedbackA reaction bar under a review: five icon reactions with rolling counts in one raised strip, any number on at once, and a line that names the top reaction from the counts.
- Pro
Page Feedback Footer
PreferencesA footer that asks whether the page was helpful: a Yes and No toggle that opens a note form with validation, a status line that thanks the reader, and two link columns.
- Pro
Star Rating Feedback Contact
Support and feedbackA product feedback form for a roadmap tool in a card in card: five named stars with a word that follows the choice, switch-on topic chips and a message, ending in a confirmation that lists what was chosen.
- Pro
Rating FAQ
Votes and reactionsA reverse-split FAQ for a recipe app: seven rows that each show an average rating, with a one-to-five scale at the foot of every open answer and the header beside the rows.
- Pro
Comment Thread Blog
Reader feedbackA blog comment thread on hairline rows: top-level comments with initials avatars and fixed dates, replies in a Collapsible, and a form with an empty-submit check that adds your comment to the thread.
- Pro
Reader Poll Blog
Reader feedbackA reader poll in a split: a RadioGroup of four choices and a Vote button at the start, result bars with percentages, vote counts and a total at the end, and a Change vote button that takes your vote back.