shadcn.io is not affiliated with official shadcn/ui
NPS Display Reviews Block for Radix UI
A Net Promoter Score drawn as eleven score columns from 0 to 10 in three labelled brackets, with the score worked out and signed, and a press on a column listing the comments left with that score.
Installation
Overview
A Net Promoter Score for React with Radix UI, from the survey of Tarnloft, a fictional project tracker. A header gives the score worked out and signed ("+51", with "63% promoters minus 12% detractors" under it). Under a rule, eleven columns, one per answer from 0 to 10, share their hairlines rail to rail beneath three labelled brackets: detractors (0 to 6), passives (7 and 8) and promoters (9 and 10), each with its share. Each column is a button in a single-choice group: it shows its count above a bar drawn from that count, and its score below. Press one and a band under a rule lists the comments left with that score, with a polite line that says how many of the 400 answers it is and how many comments are shown. Columns are drawn in three tones of your theme's text colour by bracket, never in a sentiment colour. Eleven typed counts and eighteen typed comments drive it; the shares use the largest remainder method and the score is the promoters' share minus the detractors'. It's built from Toggle Group, Avatar, Sliding Number and Guides, with CSS transitions only.
FAQ
How do I use my own responses?
Edit COUNTS at the top of the file: eleven numbers, the answers given for each score from 0 to 10. The three bracket shares, the Net Promoter Score and every column are worked out from them when the module loads. The comments are COMMENTS: a score, a name and the text; keep at least one for every score, and the band says how many are shown. The score is the promoters' share minus the detractors' share, each a whole percentage by the largest remainder method, so 63% minus 12% is exactly +51.
How do the columns work?
They are one single-choice Toggle Group: a press, or the arrow keys, moves the choice, and it always keeps one on. Each column is named for assistive technology in full ("Score 9, a promoter: 96 answers, 24%"), and the drawing inside it is hidden so nothing is read twice. The comments for the chosen score and an unseen copy of every score's comments share one cell, so the band keeps the height of the tallest and choosing a score moves nothing.
The group is type="single" with value={score}; an empty value, from pressing the chosen column again, is ignored.
How is the score worked out?
A Net Promoter Score counts answers of 9 and 10 as promoters, 7 and 8 as passives and 0 to 6 as detractors, and subtracts the detractors' percentage from the promoters'. Passives are counted in the total but not in the score. Here 252 of 400 are promoters (63%) and 48 are detractors (12%), so the score is +51. The sign is part of the figure: it would read −20 if detractors outnumbered promoters.
Why aren't promoters green and detractors red?
Colour would carry a judgement the brackets already state in words. The three brackets are three tones of your theme's text colour (full, medium, light) and each is labelled with its name and share, so the chart reads in any theme and in greyscale, and the page's primary colour stays free for its call to action. The chosen column takes a tint and a line under it.