shadcn.io is not affiliated with official shadcn/ui
Reaction Bar Blog Block for React
A 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.
Installation
Overview
A reaction bar for React with Base UI, written for Tastemoor, a food-criticism site, under one review. Five icon reactions (Helpful, Loved, Clapped, Surprising and Saved) sit in a single raised strip, each with a rolling count. Any number can be on at once; pressing one adds you to its count, pressing it again takes you back out, and a line under the strip names the top reaction, worked out from the counts as they stand. The counts are example data, your reactions stay on this page and nothing is sent. The strip wraps on a phone and the block is one calm row of controls: no cards, no covers. It uses ToggleGroup, SlidingNumber and Guides, with CSS for the entrance.
FAQ
Where do the counts come from?
From REACTIONS at the top of the file: each reaction has an id, a label and a base, the number of readers before you. The count shown is the base, plus one while your reaction is on. The line under the strip is derived from the same list, so the top reaction and its share ("212 of 560") are always the numbers on the buttons.
Are reactions saved?
No. They live in the component's state, so a reload starts again, and nothing is sent. To keep them, send the pressed ids to your backend where the state is set and seed base from your totals.
Can I choose more than one?
Yes: it is a multiple toggle group, each button independent, each with a pressed state (a filled button) and a name that includes its count, such as "Helpful, 213 readers". Arrow keys move between the buttons and Space or Enter toggles one.
How does the count roll, and what about reduced motion?
The digits roll with CSS when the number changes. With reduced motion on, the counts update without rolling. Screen readers get the button's name, not the rolling digits.
Related
- Pro
Was This Useful Feedback Blog
Reader feedbackA 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.
- Pro
Post Footer Blog
Article partsThe end of an article: tags as links, a share cluster whose Copy link really copies, an author panel beside Published and Updated dates, and Previous and Next as two cells on a shared hairline with arrow key hints.
- 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.
- 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
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
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.