shadcn.io is not affiliated with official shadcn/ui
Reaction Bar Blog Block for Radix UI
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 Radix 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.