Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Detailed Card Reviews Block for Vue

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A single detailed review for Vue with Ark 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.

Does the card follow my theme?

Yes. The panel is bg-card with a ring and a shadow inside a muted shell, with no dark scope, so it is light on a light page and dark on a dark one. Stars and bars take the text colour, so the section has no primary colour at all.

Does it work right to left?

Yes. The rows and bars run from the start, the reply's rule is on the start side, half stars mirror, and every figure and date sits in a bdi.

All 100 reviews blocks