shadcn.io is not affiliated with official shadcn/ui
Product Card Rating Reviews Block for React
One 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.
Installation
Overview
A product card with its reviews for React with Base UI, for the Stoveline Cast 5.5, a fictional enamelled Dutch oven. A centred header sits over a card in card: a muted shell with + marks on its corners around a raised panel that follows your theme. The panel shows the oven drawn in greyscale lines, its name and price, read-only stars beside the average and a link to all 42 reviews, five mini distribution bars, the share that would recommend it and, under a rule, the most helpful review: reviewer, verified mark, date, its own stars, a title and the first part of the text, with a Read the whole review disclosure that opens the rest, including the one complaint. Every figure is worked out from the typed counts at the top of the file. On a phone the oven shrinks beside the name and everything stacks. It's built from Rating, Collapsible, Avatar and Guides.
FAQ
How do I change the figures and the review?
Edit TALLY (how many reviews gave each star rating), RECOMMENDED (how many would recommend it) and BEST (the review, split into lead and rest) 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.
How does Read the whole review work?
The first part of the text is always shown; the rest is in a Collapsible that opens in place, with the button's aria-expanded following it and a chevron that turns. Nothing is fetched. The button's label stays the same when it is open, so the name doesn't change under a screen reader.
Where does the reviews link go?
It's a plain link (href="#"): point it at your reviews page. The card has no button at all; a product card's own call to action belongs to your shop.
Can I swap the drawing?
Yes. Oven is an inline SVG in greyscale with a title and aria-hidden; replace it with your product's picture or another drawing in the same place. It holds nothing focusable.
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
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
Star Rating Grid Reviews
Criteria and compareEight hand tools compared at a glance in a grid on shared hairlines, each with a drawing, stars, the average and count, and the share that recommend it, sorted by a Select and with a hover card of category scores.
- Pro
Reader Highlights Reviews
Filter and searchOne long review of a fly rod where each sentence is a checkbox you can highlight, with a stronger tint for sentences more readers marked and a Most highlighted list that re-ranks.
- 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
Sidebar Summary Reviews
Score summariesThe 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.