shadcn.io is not affiliated with official shadcn/ui
Rating Breakdown Reviews Block for Vue
A review summary for a carry-on suitcase whose star rows filter the reviews: the average, the count, the share that would recommend it and a five-row distribution, beside the four most helpful reviews with a Helpful vote each.
Installation
Overview
A rating breakdown for Vue with Ark UI, for the Ferrylark Cabin 55, a fictional carry-on suitcase. A compact header holds the title, one sentence and the Shine Button that writes a review. Under its rule, a divider splits the section: at the start, the score summary of all 1,284 reviews (the average to one decimal beside read-only stars, the count, the share that would recommend it and five distribution rows, each a bar with its count and percentage); at the end, the four most helpful reviews as ruled rows. Every distribution row is a toggle: press the two-star row and the list narrows to the two-star review, a live line says "Showing 1 of 4 reviews", and a rating none of the four gave shows an empty state that says how many reviewers did give it. Each review carries its stars and their value in words, a title, the text, the reviewer with an initials avatar, a "Verified purchase" mark in words, a fixed date and a Helpful vote that counts once. Every figure is worked out from typed counts at the top of the file, and stars and bars are drawn in your theme's text colour, so the Shine Button stays the one primary control. On a phone the summary sits above the reviews and each review stacks, so the score and the first review share the first screen. It's built from Rating, Toggle, Avatar, Empty, Button, Guides and Shine Button, with CSS transitions only.
FAQ
How do I put in my own ratings?
Edit TALLY (how many reviews gave each star rating), RECOMMENDED (how many would recommend the product) and REVIEWS (the reviews to show) at the top of the file. Everything else is worked out from them when the module loads: the total, the average to one decimal (by whole-number maths, so 5,641 stars over 1,284 reviews is exactly 4.4), the stars drawn for it to the nearest half, the share that would recommend it, and each row's percentage by the largest remainder method, so the five rows always add up to 100.
What does pressing a star row filter?
The reviews listed at the end, not the counts. The summary always describes every review; the list holds a sample (here, the four most helpful), and a row narrows that sample to one rating. Press the row again, or Clear, to see all four; the line under the rows says what is showing and is read out politely. When none of the shown reviews has that rating, an empty state says how many reviewers gave it, with a button that shows the four again and puts focus back on the row you pressed. An unseen copy of the full list holds the height, so filtering never moves the page below.
Is the Helpful vote saved anywhere?
No. It's local state: pressing Helpful adds one to that review's count and says "You marked this helpful", and pressing it again takes the vote back, so a visitor counts once. Nothing is sent and a reload starts afresh. To keep votes, send the review's id to your own endpoint from the handler and seed helpful from your data.
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", or the average with "out of 5 on average"). Rating draws in your warning colour by default; here it takes text-foreground, and the average uses half stars. The Rating is built on Ark UI on every target, so it renders the same everywhere.
Does it work right to left?
Yes. The rows follow the page's direction: the star at the start, the bar filling from the start, then the count and the percentage, each figure isolated so its digits and sign stay in order. A half star is mirrored so it fills from the start too, and dates are fixed time elements with the machine-readable date.