shadcn.io is not affiliated with official shadcn/ui
Progress Bar Testimonials Block for React
A customer survey as one hairline band: an overall score and five categories as bars out of 100, each with a tick at the industry average and a badge for the gap, above two customer quotes.
Installation
Overview
Scores with a yardstick. One band between the page's rails holds six cells that share their hairlines: a tinted overall score, then ease of use, support, reliability, features and value, each a bar out of 100 in the foreground colour with a tick where the industry average falls and a badge that says how far ahead or behind you are ("+6 vs average", "−3 vs average"). Two customer quotes share the band's lines beneath it, including one about the category that scores lowest, and a Shine Button, the block's one primary control, opens the full survey. The overall score, every gap and every tick position are worked out from the numbers in the file. Below sm the cells become a strip you swipe, with the next cell peeking so it's clear there is more. It's built from Progress, Badge, Avatar, Guides and Shine Button, with CSS transitions only and your theme's tokens. For landing pages and product pages that would rather show a comparison than claim a superlative.
FAQ
How do I use my own scores?
Edit CATEGORIES at the top of the file: a name, your score and the average for your industry, each out of 100. The bars, the ticks, the gap badges and the overall figures are derived from them. Only publish an industry average you can source.
How is the overall score worked out?
It is the mean of the category scores, rounded to a whole number with integer maths, and the comparison is the mean of the category averages. Change a category and the overall score and its gap follow.
What if a category is below the average?
Its badge shows a negative gap with a true minus sign, and its tick sits ahead of the bar. The block ships with one such category on purpose: a comparison that never loses reads as marketing. Remove the quote about it if you do not want to talk about it.
How do screen readers read the bars?
Each cell is a list item with one hidden sentence, for example "Support: 92 out of 100, 8 points above the industry average of 84". The bars, ticks and badges are hidden from assistive technology so nothing is read twice.
Does it work in right-to-left languages?
Yes. Bars fill from the inline start and each tick is placed from the same side, so they still line up; signed values and the "/100" are isolated so their signs and digits keep their order.
How does it look on a phone?
The scores become a strip you swipe sideways, snapping cell by cell with the next one peeking in, and the strip takes focus so keyboard users can scroll it with the arrow keys. The quotes stack in one column beneath it; nothing else scrolls sideways, and it fits at 320 pixels.
Related
- Pro
Rating Breakdown Testimonials
Ratings and reviewsA review summary whose histogram rows are filter buttons: press a star row and the featured reviews narrow to that rating, with a live count and an empty state.
- Pro
Star Distribution Testimonials
Ratings and reviewsA vertical column histogram of one-to-five star reviews in one framed figure whose cells share hairlines: the score and a plain-words verdict, one owner's quote, and the chart with the value above each column and a dashed average marker. A Shine Button in the header links to the reviews.
- Pro
Top Rated Testimonials
Ratings and reviewsFour reviews of an operations app with a sort control in the header: most helpful, highest rated or newest, re-ordered live from typed numbers, in one band of ruled rows with a status line and an average.
- Pro
NPS Score Bar Testimonials
Ratings and reviewsA Net Promoter Score in large type beside a stacked bar of promoters, passives and detractors drawn from typed counts, in two ruled bands with a promoter's quote at display size and a Shine Button.
- Pro
With Rating Testimonials
Collect a reviewOne large customer quote over a closing band you can rate in: choose stars and the average and the rating count change on the spot, with a note that nothing is saved.
- Pro
Inset Star Rating Big CTA
Social proofA card-in-card call to action built on a rating summary: a headline and a Shine Button over a band with a big score and foreground stars beside a five-to-one star histogram, all figures worked out from the counts.