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.
NPS survey
nps.tsxA 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.
| 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
face-rating.tsxFive drawn faces and a large face whose mouth and brows morph to the hovered rating, then topic chips, a comment and send.
| 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
bug-report.tsxCategory segments, summary and details fields, a simulated page capture with shutter flash and thumbnail, and a send flow that returns a ticket id.
| 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 }. |
Install the whole set
Installs every feedback widgets variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
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.