NPS Score Card
What is this?
A white NPS tile: a label, the response count, a large score, and a three-part bar for promoters, passives, and detractors. When the card comes into view, the score counts up and the bar fills from left to right in green, gray, and rose, with each share fading in below. Swap the label, score, caption, and the three shares, then drop it into a feedback report or a customer-success feature block.
NPS Score Card
A white NPS tile: a label, the response count, a large score, and a three-part bar for promoters, passives, and detractors. When the card comes into view, the score counts up and the bar fills from left to right in green, gray, and rose, with each share fading in below. Swap the label, score, caption, and the three shares, then drop it into a feedback report or a customer-success feature block.
Verified Technical Spec
- Animation
- CSS / Tailwind
- Reduced motion
- Verified
- Keyboard focus
- Not detected in source
- Compatibility
- Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible
Included
- Copy source into Cursor or Claude for agent install
- Finished React · TypeScript · Tailwind CSS UI
Dependencies
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
Tech Stack
- React
- TypeScript
- Tailwind CSS
Version 1.0.0