shadcn.io is not affiliated with official shadcn/ui
Helpful Votes Reviews Block for Radix UI
The 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.
Installation
Overview
A helpful-votes section for React with Radix UI, for the Wherstead Slim Pitcher, a fictional water filter jug. A start-aligned header sits over two cells that share one hairline: the most helpful review among the four and five stars and the most helpful among the one and two stars, each with its stars and their value in words, a title, the text, the reviewer, a fixed date, a Helpful toggle and the sentence "64 of 71 found this helpful". Under a rule, the other three reviews are ruled rows with a sort group, Most helpful or Newest, that re-orders only when you press it. Both picks, the order and every figure come from the typed votes at the top of the file. It uses Toggle, ToggleGroup, Rating, Avatar and Guides, with CSS transitions only. On a phone the pair stacks, so the first review starts well inside the first screen.
FAQ
How are the two featured reviews chosen?
By the votes in REVIEWS: the review with the most helpful votes among those rated 4 or 5 is the favourable pick, and the one with the most among those rated 1 or 2 is the critical pick, ties broken by id. Swap the data and the cells follow. The other reviews fill the rows underneath, so no review appears twice.
What does pressing Helpful do, and is it saved?
It's a real toggle with aria-pressed. Pressing it adds one to the helpful count and one to the number of readers who voted, so "64 of 71" becomes "65 of 72"; pressing it again takes both back. A polite status line says "You marked this review helpful" or "Vote taken back". Nothing is sent and a reload starts afresh: to keep votes, post the review's id from the handler and seed helpful and asked from your data.
Why doesn't the order change when I vote?
Order is read from the votes the page loaded with, and only the sort group re-orders. A row that jumped to the top under your pointer the moment you voted would be hard to follow, so your own vote moves the count and nothing else. The line beside the group says which order the rows are in and is read out when it changes. The group is a single-type ToggleGroup, which reports an empty string when you press the chosen item; the handler ignores it.
Why are the stars hidden from screen readers?
They're the catalog Rating, read-only, inside an inert, aria-hidden wrapper: they only draw the value, and the words next to them say it ("4 out of 5"). Rating draws in your warning colour by default; here it takes text-foreground, so the stars and the pressed controls stay in your theme's text colour.