shadcn.io is not affiliated with official shadcn/ui
Emoji Reactions Reviews Block for React
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 Base 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.
The trigger is the Popover's own button, styled with buttonVariants.
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.
Related
- Pro
Helpful Votes Reviews
Votes and repliesThe best favourable and the best critical review of a water filter jug side by side, each with a Helpful vote and a worked-out 'n of m found this helpful', above the other reviews in ruled rows with a most-helpful or newest order.
- Pro
Upvote System Reviews
Votes and repliesSix reviews of a board game as cards with an Up and Down pill and a net score worked out from the votes, tabs for Top, New and Controversial, and a collapsible that folds reviews at a net of minus three or lower.
- Pro
Reaction Pills Testimonials
Chats and postsA launch-week chat in a split: the headline and a Shine Button in a rail, and four messages ruled apart by hairlines, each with celebrate, love and ship-it reaction pills that really toggle and count.
- Pro
Question and Answer Reviews
Votes and repliesQuestions about a pressure cooker answered by people who own one: a search box and an All, Answered or Unanswered group, answers with the seller's pinned first, a Helpful toggle on each, an inline answer form and an Ask a question dialog.
- Pro
Reply Thread Reviews
Votes and repliesOne three-star dishwasher review with its conversation in a single framed window: the seller's reply, the buyer's follow-up and the seller again under depth rails, and a real reply form with a live character count that appends your reply to the end.
- Pro
Masonry Layout Reviews
Cards and wallsTwelve reviews of pruning shears as cards of every length in CSS columns, with a star filter, an order switch, a polite count and a Helpful vote on each card.