shadcn.io is not affiliated with official shadcn/ui
Verified Buyer Testimonials Block for Radix UI
One focal review under a Verified purchase badge in a raised card inside a tinted shell, a divider and a receipt of what the customer bought, then a band of three compact reviews with the same badge.
Installation
Overview
A review that shows its paperwork. A compact header names the product (Pennywick, a made-up bookkeeping app) and holds the Shine Button. One large review leads, headed by a "Verified purchase" badge and its stars in the text colour, as a raised card inside a tinted shell with + marks on its corners. A solid divider that reaches the top rule separates it from a receipt that lists what the customer bought: the plan, the number of seats and how long they have been a customer ("Month 14"). Under it a band of three shorter reviews on shared hairlines carries the same badge and a one-line summary of each purchase, and on a phone it becomes a snap carousel with the next review peeking. There are no calendar dates anywhere, so nothing goes stale. It's built from Badge, Data List, Avatar, Shine Button and Guides, with Lucide icons, CSS transitions only and your theme's tokens. For pricing pages and upgrade pages where a customer's real plan carries as much weight as their words.
FAQ
How do I use my own reviews and receipts?
Edit FOCAL and COMPACT at the top of the file. Each review has a purchase with its plan, seat count and a tenure label such as "Month 14". The receipt panel and the one-line summaries are generated from that data.
What makes a purchase verified?
In this block, nothing but your data: the badge is a styled label that you render for a review. Show it only when you have matched the review to an order or subscription record, for example in a server component that sets the flag, and drop the badge from reviews you cannot match.
Why is tenure written as a month count?
"Month 14" is a recurring label, not a date, so it never goes stale and reads the same on the server and in the browser. Compute it from your subscription start when you feed the block.
How do screen readers read it?
Each review is a figure with its quote and attribution, the stars are decorative and read as "Rated 5 out of 5", and the badge reads as its text. The receipt is a labelled section titled "What they bought", with its rows as a description list.
Does it work in right-to-left languages?
Yes. The layout uses logical properties, and the quote and the receipt values are isolated so punctuation and numbers keep their order.
How does it look on a phone?
The receipt moves under the focal review, a rule between them, and the three compact reviews become a sideways snap carousel with the next one showing at the edge, so the section stays short. The carousel is a focusable region, so the keyboard can scroll it. The badge and stars wrap onto two lines instead of overflowing at 320 pixels.
How do I point the button at my page?
Change the href of the call to action in the header. Say where it goes in its label, such as "Read all verified reviews". It's a Shine Button, the one primary control in the block, and a diagonal band of light crosses it once on hover or focus (it fades in instead with reduced motion).
The link renders its a through asChild, so the button's styles land on the link.