shadcn.io is not affiliated with official shadcn/ui
Progress Bar Testimonials Block for Vue
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.