shadcn.io is not affiliated with official shadcn/ui
Trust Badges Testimonials Block for React
A scoreboard of four review sources for a bookkeeping app: a weighted average beside the heading, then a band of four cells on shared hairlines, each with a score, partly filled stars, its review count, one reviewer line and a link.
Installation
Overview
Show where the praise comes from, not just that it exists. A compact header carries the heading and one sentence about Brindle Books, a made-up bookkeeping app for small shops, with the average rating at its end. Below it a band of four cells shares its hairlines between solid page rails, with + marks where the band meets the top rule. Each cell has a large score, five stars that fill to the exact tenth (4.8 fills four stars and four fifths of the fifth) in the text colour, the number of reviews behind it, one line from a reviewer and a link to read more. The average is worked out from the cells themselves, weighted by how many reviews each source has, so the headline can never disagree with the evidence. The sources are invented placeholders and there are no seals or awards: you add only the ones you've earned. On a phone the cells stack with the score beside the name, and nothing scrolls sideways. There's no button and no primary colour: the links are the next step. It's built from Lucide's star and your theme's tokens. For landing and pricing pages where buyers compare you across review sites.
FAQ
How do I change the sources, scores and counts?
Edit the SOURCES array at the top of the file. Each source has a name, a focus line, its score in tenths (48 means 4.8), its number of reviews, a one-line quote and the reviewer who said it. Replace the invented names with the review sites you really appear on, and copy their current score and count rather than rounding up.
How is the average calculated?
Each score counts as many times as the source has reviews, so a site with 2,310 reviews moves the average more than one with 410. The sum and the rounding use whole numbers, so the figure shown is always the same on the server and in the browser. The review total is the sum of the four counts. Change a score or a count and the average, the stars beside it and the total all follow.
How do the partly filled stars work?
Each star is an empty outline in the border colour with a clipped, filled copy on top in the text colour; the copy's width is the part of that star the score covers. The fill starts at the reading direction's start, so it grows from the right in a right-to-left layout. The stars are decorative: the score is written as text ("Rated 4.8 out of 5") for screen readers, and the stars are hidden from them.
Can I add badges like Leader or Top Rated?
Only if a review site has actually awarded them to you, and then with its own terms for showing them. This block deliberately shows what can be checked, which is a score and a count, and leaves out seals, which are easy to fake and easy to dispute. If you do have an award, add a Badge to the cell's header with the award's exact name.
Where do the review links go?
Each cell ends with a plain link whose label names its source ("Read the Peerlane reviews"). Point its href at your profile page on that site, or swap in your router's link. It's an ordinary a element on every base, with a visible focus ring and an arrow that mirrors in right-to-left languages.
Does it work in right-to-left languages?
Yes. The cells, the stars and the arrow follow the reading direction. Scores, counts and the "out of 5" text sit in a bdi, so they keep their order, and the quotes keep their quotation marks at the ends of the sentence. The band is one column on a phone, two cells across from sm and four from lg, and it reads at 320px.
Related
- Pro
Company Logos Testimonials
Logos and facesEight customer wordmarks of an inventory app as tabs in a bordered grid that shares its hairlines: choose a company to read its quote, who said it and the one result it points to, in a raised card inside a tinted shell, under a header with a Shine Button.
- Pro
Logo Bar Testimonials
Logos and facesA bar of six customer wordmarks as cells of one hairline band, each opening a single line from that team in a display-size quote below, with the speaker's name and role.
- Pro
Social Proof Bar Testimonials
Results and figuresA proof bar for a help-desk app: four linked figures (customers, review score, retention, reply time) with a small greyscale picture each, as one band with shared hairlines and + marks at the rails, then the quote that explains them, with a Shine Button in the header row.
- Pro
Testimonials With CTA
Results and figuresTwo customer quotes led by the result each one measured, in a hairline band with a divider, then a card in card whose headline repeats the larger result and whose Shine Button is the one primary action.
- Pro
Centered Award Badge Hero
Logos and social proofA compact centered hero led by an award plaque in a hairline frame, with a headline, a Shine Button and an outline button, then one band of three more recognitions.
- Pro
Centered Light Trust Row CTA
Trust and securityA centred statement call to action for an accessibility scanner: a big headline, the Shine Button and an outline button, then a framed row of four trust cells on shared hairlines that each open a short note on what they cover.