Feedback Rating Card React component
An in-app feedback card with an NPS 0–10 or five-face satisfaction scale: colors that show detractors, passives and promoters as you hover, a follow-up question that depends on the score, quick-pick tags, a comment with a counter, permission to follow up, a thank-you that asks happy users for a review, and Not now that tucks it into a pill.
About the Feedback Rating Card component
Feedback Rating Card asks for a score and then the one question that matters for that score. It supports a classic 0–10 Net Promoter scale and a simpler five-face satisfaction scale.
Colors show where a score lands as people hover, and the follow-up adapts: happy users are asked what they love and invited to leave a review, unhappy users are asked what to fix and can agree to be contacted. Quick-pick tags make answering fast, and Not now tucks the card away without losing it.
When to use it
Use it after a key moment in your app, like finishing onboarding, closing a support ticket or a few weeks of active use.
Ask rarely; showing it on every visit trains people to dismiss it.
Installation
Add the Feedback Rating Card component to your project with the shadcn CLI. It lands in components/feedback-rating-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/feedback-rating-cardOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<FeedbackRatingCard /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| product | string | "Nexora" |
| scale | "nps" | "csat" | "nps" |
| onSubmit | (data: { score: number; tags: string[]; comment: string; followUp: boolean }) => Promise<void> | void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- productstringDefault: "Nexora"
- scale"nps" | "csat"Default: "nps"
- onSubmit(data: { score: number; tags: string[]; comment: string; followUp: boolean }) => Promise<void> | void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Feedback Rating Card FAQ
- What do the colors mean?
- On the NPS scale, 0–6 are detractors (red), 7–8 passives (amber) and 9–10 promoters (green). On the face scale, the two unhappy faces are red, neutral is amber and the happy faces are green.
- How do I collect the answers?
- onSubmit receives the score, selected tags, the comment and whether the person agreed to be contacted. Return a Promise to keep the Sending state until it's stored.
- Can I change the tags?
- Yes. There's one list for positive answers and one for the rest; edit them to match what you want to learn about your product.
- What does Not now do?
- It collapses the card into a small Give feedback pill. Store the dismissal so you don't ask again too soon, and let people reopen it from the pill.
- Is it accessible?
- The scale is a radiogroup with labelled options (numbers or face names), the score caption updates politely, tags are toggle buttons, the textarea is labelled and the thank-you is announced.
