shadcn.io is not affiliated with official shadcn/ui
Social Proof Bar Testimonials Block for Ark UI
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.
The link renders its a through asChild, so the button styles land on the link.
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.