shadcn.io is not affiliated with official shadcn/ui
Trust Signals Reviews Block for React
How an eyewear shop checks its reviews: four tallies counted from a typed review log and an accordion of five rules, each saying exactly what its count measures, with no trust score.
Installation
Overview
A review policy for React with Base UI, for Sedgecase, a fictional eyewear shop. A header says there are four counts and five rules, then a split behind a divider. At the start, a list of facts with four rolling figures: reviews submitted (41), from verified buyers (33), read by a person (41) and removed for abuse (2). At the end, an Accordion of five rules, such as "Negative reviews are never removed for being negative" and "A Verified purchase mark means an order is on file". Each row carries a badge with the count it rests on ("4 at 1 or 2 stars") and, when open, a "What it counts" paragraph that says exactly which reviews were counted and how many. The first rule starts open. The numbers are not typed: a short log of the 39 published reviews (a star rating and a buyer kind each) plus the 2 removed, with their reasons, is counted when the file loads. There is no composite trust score and no seal. It's built from Accordion, Badge, Counting Number and Guides, with CSS transitions only.
FAQ
How do I use my own log?
Replace LOG and REMOVED at the top of the file. LOG is a string of published reviews, each a star rating followed by "v" (an order is on file) or "g" (a guest). REMOVED lists the reviews that came down, each with its rating, its buyer kind and the reason in a few words. Every tally, badge and rule text is built from those two, so the figures cannot drift from the log. Rewrite the five rule sentences to match your own policy.
What does verified mean here?
That the log entry has an order on file. In this demo that is a letter in the typed data, nothing more; the block does not look anything up. On your site, derive the letter from your order system, and keep the rule's wording to what that system checks.
Why is there no trust score?
A single score would be invented: nothing here is computed from a model of trust. The block shows only what can be counted from the log, and says what each count measures, so a reader can judge for themselves.
How do the rules open?
Press a rule, or focus it and press Enter or Space, to open it; the first starts open and the others can stay closed. Arrow keys move between the rules on Ark and Radix. Where the answers are kept while closed differs by library, so a search of the page finds closed answers on some targets and not on others.
Related
- Pro
Verified Purchases Reviews
Lists and pagesReviews 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.
- Pro
Verified Toggle Reviews
Score summariesA review summary with a Verified purchases only switch: the average, the count, the share rated four or more and five distribution rows are worked out again, with a delta line against all reviews.
- Pro
Moderation Queue Reviews
ModerationA keyboard triage queue for a marketplace: eight held reviews with a progress line, and the review in focus with Approve, Reject and Escalate, each on a key, a polite status line and Undo.
- Pro
Community Aggregate Reviews
Criteria and compareOne rating pooled from three channels of a camera maker: a cell per channel with an include checkbox, and five pooled distribution rows stacked by channel with weights of 100, 60 and 30.
- 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
Flagged Queue Reviews
ModerationFlagged reviews of a travel-guide series as accordion rows ordered by report count, each opening to the reasons tally, the reporters, the review and two decisions: Dismiss flags, or Remove review behind a confirm dialog.