shadcn.io is not affiliated with official shadcn/ui
Sidebar Summary Reviews Block for React Aria
The review summary that lives in a product page's sidebar, shown at its real 20rem width beside a greyscale sketch of the page: score, five mini bars, the most mentioned words, the latest review and a link to all of them.
Installation
Overview
A sidebar review summary for React with React Aria, for the Elmline, a fictional standing desk. A compact header introduces a framed figure: a muted shell with + marks on its corners holding a greyscale sketch of the product page (a window with the desk, a monitor and a cable tray drawn in lines) and, beside it at the real width of 20rem, the card that would live in the page's sidebar. The card shows the score with read-only stars and the count, five mini distribution bars with their percentages, the three words reviewers mention most with their counts, the latest review in two lines with its stars, reviewer, verified mark and date, and a ghost link to all 24 reviews. Every figure is worked out from the typed counts at the top of the file. On a phone the sketch is hidden and the card fills the frame. It's built from Rating, Badge, Avatar, Button and Guides.
FAQ
How do I change the figures?
Edit TALLY (how many reviews gave each star rating), MENTIONS (the words reviewers use most and how many reviews use each) and LATEST (the review the card quotes) at the top of the file. The average, the stars drawn and each row's percentage by the largest remainder method are worked out from the tally. The mention counts are typed, so count them from your own reviews.
What is the sketch for?
It only makes the width read: the card is 20rem wide, which is what a product page's sidebar usually gives it. It is hidden from assistive technology, holds nothing focusable and disappears below the lg breakpoint. Delete PageSketch and the card works alone.
Where does See all reviews go?
It's a ghost button that is a link (href="#"): point it at your reviews page. The section has no primary button, because the card is a summary, not a call to action.
It renders a link when it has an href.
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 beside them say it ("4.5 out of 5 on average", "5 out of 5"). Rating draws in your warning colour by default; here it takes text-foreground.