shadcn.io is not affiliated with official shadcn/ui
Detailed Card Reviews Block for React
One review with everything it can carry in a card in card: the reviewer and purchase facts, five criteria scores, pros and cons, three drawn pictures, a Helpful vote and the seller's reply.
Installation
Overview
A single detailed review for React with Base UI, for the Newelhouse Slate 11, a fictional tablet. 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 carries the reviewer with a verified mark in words, a date and the purchase facts (the variant and how long it has been owned), read-only stars with their value in words, a title and the text, five criteria scores as a list of bars, a Pros and a Cons column each led by an icon and its word, three small greyscale pictures with captions (the tablet on a desk, on a stand and in its case), a Helpful vote that counts once and the seller's reply, which opens in a Collapsible. It's built from Rating, Collapsible, Toggle, Badge, Avatar and Guides.
FAQ
How do I put in my own review?
Edit REVIEW (the text, rating, date, variant and owned time), CRITERIA (a label and a score from one to five each), PROS, CONS and REPLY at the top of the file. Each criteria bar is drawn from its score, and the seller's reply is read from REPLY.
Are the pictures photos?
No. Each is a small inline SVG in greyscale, hidden from assistive technology, with its caption in text below. Replace a scene with the buyer's <img> (with an alt) in the same tile; the three tiles stay three across on a phone and just get smaller.
Is the Helpful vote saved?
No. It's local state: pressing Helpful adds one 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, post the review's id from the handler.
How does the seller's reply open?
The link under the vote is a Collapsible trigger: its aria-expanded follows it, its label stays the same when open and a chevron turns. The reply is plain text with a Seller badge and a fixed date.
Related
- 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
Reply Thread Reviews
Votes and repliesOne three-star dishwasher review with its conversation in a single framed window: the seller's reply, the buyer's follow-up and the seller again under depth rails, and a real reply form with a live character count that appends your reply to the end.
- Pro
Pros and Cons Reviews
Insights and trendsPros and cons gathered from 86 reviews of a robot vacuum: a two-part bar of the mentions, two columns of points with how many reviews mention each, and one supporting quote per point.
- Pro
Long-Form Review
Cards and wallsA customer's six-month review of a keyboard as four chapters beside a sticky chapter index, with inline Pro and Con markers, a reading time worked out from the words and a verdict band.
- 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
Sentiment Badges Reviews
Filter and searchSix meal-delivery reviews each marked with a tone badge from a printed rule, with a drawn shape and a word, and a chip filter by tone with counts.