shadcn.io is not affiliated with official shadcn/ui
Reaction Votes Changelog Block for Solid
Four release rows, each with four reaction toggles drawn with icons (a thumb, a heart, sparkles, a party popper) whose counts move up by one when pressed and back when pressed again.
Installation
Overview
Reactions on releases for Solid with Ark UI, written for Thumbrise, a fictional feedback widget. A start-aligned header carries the title and one sentence, and under it four releases are rows between the page's rails: the version, day and type tags (an icon and a word), a linked title and a sentence, and four reaction toggles with their counts: a thumb, a heart, sparkles and a party popper, all drawn with icons, with no emoji. Pressing a toggle moves its count up by one and pressing it again takes the reaction back. The four are independent, so any of them can be on together. The digits roll, and a polite status says what changed, for example "Heart on for v7.2.0: 41". A pressed toggle is the text colour on the page colour, never the primary. Reactions stay on the page: they reset on reload. The rows end the block. On a phone the toggles wrap, and from lg they form a two-by-two grid at the row's end. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Toggle, Sliding Number, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For changelogs and release notes where readers can tell you what landed. The releases and counts are example data.
FAQ
Where do the counts come from?
Each release stores everyone else's counts in counts, and the block adds one when you have pressed a reaction. So pressing moves the number by exactly one and pressing again puts it back. The shown number is computed from the data and your presses, never typed. To make the counts real, send each press to your API and replace counts with what it returns.
Are my reactions saved?
No: they live in the page's state, so in this demo they reset on reload and are not shared across tabs or devices. The header says so; remove that sentence only when the reactions are stored.
How does it work with a keyboard and a screen reader?
Each reaction is a toggle button that says whether it is pressed, named with its reaction, release and count ("Heart on v7.2.0: 41"); the four sit in a group named for the release. Tab moves between them, Space or Enter presses one, and a polite status announces the change. The rolling digits are hidden from assistive technology, since the name already carries the count.
Can I change the reactions?
Edit REACTIONS: each has an id, a label and a lucide icon. If you add one, add its counts to every release and a branch to baseOf. Keep the icons paired with a name: an icon alone is not a label.