Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Verified Purchases Reviews Block for Solid

Reviews of a leather satchel with the purchase evidence beside each one: variant, how long it was owned, a masked order line and a hover card saying what was checked, ordered newest or longest owned.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Reviews with proof of purchase for Solid with Ark UI, for the Wainscotbridge Satchel, a fictional leather satchel. A header states how many of the six typed reviews match an order, then a ruled band opens with a count and a ToggleGroup that orders the list, "Newest" or "Longest owned". Each row has three parts: the reviewer (initials, name, a "Verified purchase" button, the date), the stars with the title and text, and a list of purchase facts: the variant, how long it was owned and the order line with its middle digits masked. The ownership time ("Owned 3 weeks", "4 days", "5 months") is worked out from two typed dates, the delivery and the review, never typed. "Verified purchase" opens a hover card that lists what was checked (the order on file, the delivery date, the days between delivery and review). One review is a guest: it says "Guest review, no order on file" and its Owned figure reads "Not stated". Nothing is coloured by sentiment or by verification. It's built from Rating, Avatar, Hover Card, Toggle Group and Guides, with CSS transitions only.

FAQ

How do I use my own reviews?

Replace REVIEWS at the top of the file. Each review has an id, name, rating from 1 to 5, an ISO date, a title and a body, plus the purchase facts: variant, delivered (an ISO date), a masked order and verified. A guest review leaves delivered and order empty and sets verified to false. The ownership time, the "N of 6 match an order" line and both sort orders are worked out from those fields, so there are no totals to keep in step.

What does Verified purchase mean here?

In this demo it means the review has an order on file in the typed data: an order line, a delivery date and a review written after delivery. The hover card lists exactly those three things, filled in from the review's own fields. Nothing is looked up. On your site, wire the same fields to your order system and keep the wording to what that system really checks.

How is the ownership time worked out?

By whole days between the delivery date and the review date, using UTC date arithmetic so the same text appears on every server and in every time zone. Under 14 days it reads in days, under 60 in weeks (to the nearest), and beyond that in months. A guest review has no delivery date, so its Owned figure says "Not stated" and "Longest owned" places it last.

How does ordering work?

Press Newest or Longest owned. The list re-orders when you press, never under the pointer, and a polite note reads out the new order. Newest sorts the ISO dates; Longest owned sorts by days owned and breaks ties by date.

What if I can't hover?

The facts are always on the row: the variant, the ownership time and the order line are plain text. The hover card adds the detail of what was checked, and it opens on focus, on a keyboard press of the button and, on touch screens, on tap.

How does it fit on a phone?

Each row stacks: the reviewer, then the stars and the words, then the purchase facts under a hairline. The ordering control sits under the count. Nothing scrolls sideways at 320 pixels, and the masked order line stays on one line.