shadcn.io is not affiliated with official shadcn/ui
Product Card Rating Reviews Block for Svelte
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 Svelte with Ark 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.