shadcn.io is not affiliated with official shadcn/ui
Sidebar Summary Reviews Block for React
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 Base UI, 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 the link it's given with render, with nativeButton={false}.
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.
Related
- Pro
Rating Card Widget Reviews
Score summariesAn embeddable rating card with a Compact, Standard and Wide switch that reshapes the same figures, and a field with the matching embed snippet and a Copy button.
- Pro
Summary Header Reviews
Score summariesThe header of a product's reviews page: the product name, a Write a review button that opens a real form in a dialog, and a three-cell band with the score, the share that recommend it and five distribution rows.
- Pro
Product Card Rating Reviews
Score summariesOne product card with its social proof: a greyscale drawing, the name and price, stars with the average and a link to all reviews, five mini bars, the share that recommend it and the most helpful review with a Read the whole review disclosure.
- Pro
Compact Stars Reviews
Score summariesThe smallest rating line, 4.6 (38), in a card title, a list row and a comparison table, each one a button whose hover card shows the five-row split behind the figures.
- Pro
Keyword Mentions Reviews
Insights and trendsA topic table for sofa reviews: mentions found by keywords, a share bar and the average rating of the reviews that mention each topic against the overall average, sortable, with the matching reviews under it.
- Pro
Rating Breakdown Reviews
Score summariesA 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.