shadcn.io is not affiliated with official shadcn/ui
NPS Score Bar Testimonials Block for React Aria
A 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.
Installation
Overview
Let a number make the first impression and a person make the second. Under a compact header for Tidewater, a release platform, the first band puts the score in large type beside a three-part bar of promoters, passives and detractors, with a legend that gives each group's share, how many responses it is and the scores it covers. The second band is the promoter's own words at display size, with a badge saying what they scored and a Shine Button to the full survey. The two bands are ruled with + marks and share a column divider. Every figure is worked out from three typed counts, so the bar, the legend and the score always agree, and the bar's segments are foreground tones (full, 40% and 15%) so the Shine Button stays the only primary control. It's built from Guides, Badge, Avatar and Shine Button, with your theme's tokens and CSS-only entrances. On a phone the bands stack, with the score, the bar and the legend compact enough that the quote starts on the first screen. Made for products that track Net Promoter Score and want to show the people behind the number.
FAQ
How do I use my own responses?
Edit the count of each group in GROUPS and the quote in PROMOTER. The total, the percentages, the bar and the score are all computed from those three counts. Keep the order: promoters first and detractors last, since the score is the first group's share minus the last group's.
How is the score worked out, and do the percentages add up?
Each share is the group's count over the total, rounded down to a whole percent; the points that rounding leaves over are given to the groups with the largest remainders, so the three always add up to exactly 100. The score is the promoters' percentage minus the detractors' percentage, so it matches the legend beside it; the percentages shown are what it is calculated from.
How do screen readers read the bar?
The bar is decoration. The same information is a description list under it: each group's name, the scores it covers, its percentage and its number of responses, so nothing is only in a tone. The score is real text, and the quote is a figure with a blockquote and a figcaption, under an h2.
Can I change the tones?
Each group has a tone class used by both its segment and its swatch: bg-foreground, bg-foreground/40 and bg-foreground/15. Change them there and the legend follows. They are fills with no text on them, so any theme colour works, though a colour per group would add accents next to the one primary button.