shadcn.io is not affiliated with official shadcn/ui
Emoji Reactions Reviews Block for Radix UI
Four skateboard reviews that each take six reactions from a popover of toggles with counts, show their top three beside a total, and feed a ranking of the product's reactions beside them behind a divider.
Installation
Overview
A reactions section for React with Radix UI, for the Swiftford Street Deck, a fictional skateboard. At the start, four reviews as ruled rows with their stars, title, text and reviewer. Each foot has a React button that opens a popover with six reactions (Helpful, Agree, Insightful, Thanks, Surprised and Sad), each a toggle with an icon, a word and a count; pick as many as you like and each count moves by one and back. Beside the button, the review's top three reactions and its total are worked out from the typed counts. At the end, behind a divider, the product's six reactions are ranked by their total across the four reviews with a bar each, and the ranking re-orders as you react. The reactions are Lucide icons with words, not emoji, so they look the same on every device. It uses Popover, Toggle, Rating, Avatar, Button and Guides. On a phone the ranking sits above the reviews as a small grid.
FAQ
How does a reaction work, and is it saved?
Open React on a review and the popover lists six toggles, each with its count. Press one and its count goes up by one on that review and in the ranking; press it again and it comes back down. You can pick several on the same review. A polite status line says what you did. Nothing is sent and a reload starts afresh: to keep reactions, post the review's id and the reaction's id from the handler and seed counts from your data.
How are the top three worked out?
For each review, the reactions with at least one vote are sorted by count, ties going to the order in REACTIONS, and the first three are shown as an icon and a number, followed by the total. Each icon has its word for screen readers ("Helpful 18"). Edit counts on a review and the three, the total and the ranking all follow.
What does the ranking at the end count?
The six reactions added up across the four reviews, yours included, longest bar first. The bar's length is each total against the top one. The list is an ordered list with the rank in words for screen readers, and it re-orders when a total passes another.