shadcn.io is not affiliated with official shadcn/ui
Customer Feedback Dashboard Block for React Aria
An NPS worked out from forty survey responses, a list of five themes with their own scores, and an inbox of the chosen theme's quotes where you tag a response and add it to follow-ups.
Installation
Overview
Read what is behind your NPS, with this customer feedback panel for React with React Aria. A hairline frame with a plus mark on each corner has a start cell that lists All themes and five themes (Onboarding, Pricing, Reliability, Support and Reporting), each with its own score and response count. Choosing one redraws the score, a split bar of promoters, passives and detractors, and the inbox: that theme's responses newest first, each with its score, quote, account and date. Pick a response, give it a tag with a Native Select (Bug, Request or Praise) and press the Shine Button to add it to the follow-ups; a status line counts them and says nothing was sent. The score is promoters minus detractors as a percentage of everyone who answered, worked out from the typed responses, and the inbox sits in a scrolling region of fixed height so changing theme moves nothing. Below the medium breakpoint the themes become a select above the inbox. It's built from Native Select, Badge, Shine Button and Guides. For customer success and product teams reading survey results.
FAQ
How do I load my own responses?
Replace RESPONSES: each has an id, a theme, a 0 to 10 score, a short description of the account, an ISO date and the quote. The themes come from THEMES. The scores, counts, split bar and ordering are all worked out from those rows, so nothing else needs editing.
How is the score calculated?
Responses of 9 or 10 are promoters, 7 or 8 passives and 0 to 6 detractors. The score is the promoters minus the detractors as a whole percentage of all responses, shown with a sign, and the same calculation runs for each theme and for All themes. Counts in the split bar are the same counts the sentence under it uses.
What does Create follow-up do?
It adds the selected response to a list kept in this page and the status line counts it ("Follow-ups (3), in this demo"). A response already in the list says so instead of adding it twice, and a tag you set stays on the row. Nothing is sent to a CRM or to the person who answered.
What stays local, and how do I wire it for real?
Everything: the responses are typed and tags and follow-ups live in component state, so a reload clears them. To wire it up, load responses from your survey tool, save a tag with each response, and make Create follow-up create a task in the system your team works from.