shadcn.io is not affiliated with official shadcn/ui
Social Proof Bar Testimonials Block for React
A 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.
Installation
Overview
A proof bar that stays a bar. A compact header says what is being measured, with one Shine Button to the reviews. Below it, four figures share one band whose rules end at the page rails with + marks: how many customers you have, your review score, how many of them stay and how fast you reply. Each pairs its figure with a small greyscale picture of its own, a row of avatars, five partly filled stars, a filled meter and a clock, and each is a link to the section of the page that proves it. The figures are four across on a desktop and two by two on a phone (where the pictures are left out). Under the band, a single customer quote says what the numbers feel like. It's built from Avatar, Guides and Shine Button with Lucide icons, CSS transitions only and your theme's tokens; stars and meter are in foreground tones. For a section under a hero, above a pricing table or at the top of a customer page.
FAQ
How do I change the figures?
Edit the four constants at the top of the file: CUSTOMERS, REVIEW_SCORE (out of 5, in tenths, so 49 means 4.9), RETENTION (a percent) and REPLY_MINUTES. The figures in the bar, the stars and the meter are all written from them, so changing a constant changes everything that shows it. The quote under the band is the QUOTE object. Use numbers you can back up, since each segment links to the section that does.
Where do the segments link to?
Each segment is an anchor to a section on the page, #customers, #reviews, #retention and #support; change href in SEGMENTS to your own sections or pages. Screen readers hear the label, the figure and where it goes, as in "Customers 12,000+, meet our customers". The arrow nudges on hover and the figure is underlined, so the segments read as links without a colour change.
Where does the Shine Button go?
It is the block's one primary control, in the header row: point its href at your reviews.
On Base UI, the link renders through render={<a href="…" />} with nativeButton={false}.
Can I use other pictures in a segment?
Yes. The small picture in each segment comes from the Visual helper, which picks one by segment id. Replace any of them with a Lucide icon, a sparkline or nothing at all. Keep it decorative: it is hidden from screen readers because the figure beside it already says the same thing. Below sm the pictures are hidden to keep the band short.
Is the bar accessible?
Yes. It is a list of four real links, each with a visible focus ring drawn inside its cell. The labels are real text rather than part of a picture, the stars and avatars are hidden from screen readers, and the dividers are the gaps between cells, not extra elements to tab through. The quote is a figure with a blockquote and the speaker in its caption.
Related
- Pro
Trust Badges Testimonials
Ratings and reviewsA 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.
- 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
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
Left-Aligned Social Proof Bar Hero
Logos and social proofA compact start-aligned hero closed by a three-cell social proof bar on its own rule: an avatar stack with the user count, a five-star rating with the review count and a compliance mark.
- Pro
Hero With Stats
Stats and live dataA split hero with a headline, a Shine Button and a second action beside a rail of four key figures on shared hairlines, each with its period and a small bar trend.