# Feedback widgets

> NPS survey, drawn face rating and bug report widgets — a follow-up that adapts to the score, a face that morphs as you hover and a screenshot capture with a shutter flash.

- Collection: Examples
- Tier: pro
- Docs: https://geturui.com/docs/feedback-widgets
- Install: `npx shadcn@latest add @geturui-pro/feedback-widgets`
- Dependencies: motion, lucide-react

## Variants

### NPS survey

A 0–10 scale that fills up to your score, a follow-up question that changes for detractors, passives and promoters, and a thank-you crossfade.

Install: `npx shadcn@latest add @geturui-pro/feedback-widgets-nps`

```tsx
import { NpsWidget } from "@/components/examples/feedback-widgets/nps";

export function Survey() {
  return <NpsWidget product="Fieldnote" onSubmit={(r) => api.nps(r)} onDismiss={hide} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| product / question | `string` | — | Question defaults to “How likely are you to recommend {product}…”. |
| followUps | `{ detractor; passive; promoter }` | — | Follow-up prompt per band. |
| defaultScore | `number | null` | null | Preselected score. |
| onSubmit | `({ score, comment }) => void` | — | Submit handler. |
| onDismiss | `() => void` | — | Close button handler. |

### Face rating

Five drawn faces and a large face whose mouth and brows morph to the hovered rating, then topic chips, a comment and send.

Install: `npx shadcn@latest add @geturui-pro/feedback-widgets-face-rating`

```tsx
import { FaceRating } from "@/components/examples/feedback-widgets/face-rating";

export function CallFeedback() {
  return <FaceRating title="How was your onboarding call?" onSubmit={(r) => api.rate(r)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title | `string` | — | Question. |
| labels | `[string × 5]` | ["Terrible", …, "Great"] | Word for each face. |
| topics | `string[]` | — | Optional chips shown after rating. |
| defaultRating | `number | null` | null | 1–5. |
| onSubmit | `({ rating, topics, comment }) => void` | — | Submit handler. |

### Bug report

Category segments, summary and details fields, a simulated page capture with shutter flash and thumbnail, and a send flow that returns a ticket id.

Install: `npx shadcn@latest add @geturui-pro/feedback-widgets-bug-report`

```tsx
import { BugReportWidget } from "@/components/examples/feedback-widgets/bug-report";

export function ReportProblem() {
  return <BugReportWidget page={pathname} defaultSummary="" onSubmit={(r) => api.fileBug(r)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| page | `string` | — | Path the report is about. |
| defaultCategory | `"bug" | "visual" | "performance" | "other"` | "bug" | Initial category. |
| defaultSummary / defaultDetails | `string` | — | Prefilled fields. |
| screenshotName / ticketId | `string` | — | Labels for the simulated capture and the confirmation. |
| onSubmit | `(report) => void` | — | { category, summary, details, screenshot, logs }. |

## Accessibility

- Scores, faces and categories are radiogroups with roving focus and arrow keys.
- Every field has a visible or screen-reader label; the follow-up question is the textarea's label.
- Confirmation states use role=status; reduced motion swaps the face morph and stamp for fades.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.