A launcher pill that opens a feedback panel with a face whose mouth and brows morph across a five step mood scale. Category, note and page URL go out in one tap.
npx shadcn@latest add https://hyperblur.dev/r/form-feedback.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-feedback.tsx.
import { FormFeedback } from "@/components/hyperblur/form-feedback"
<FormFeedback floating onSubmit={(feedback) => console.log(feedback)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Share feedback" | Panel heading. |
| categories | string[] | ["Bug", "Idea", "Praise"] | Feedback types. |
| page | string | "/dashboard/reports" | Page path the user can attach. |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false | Opens the panel on mount when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the panel opens or closes. | |
| floating | boolean | false | Pins the widget to the bottom right corner of the viewport. |
| defaultRating | number | 4 | Mood selected on mount, 1 to 5. |
| accent | string | "#3ddc84" | Accent color for focus rings, selected states and the primary button. |
| delay | number | 800 | Minimum time in milliseconds the loading state stays visible, so the transition never flickers. |
| onSubmit | (values: FormFeedbackValues) => void | Promise<void> | Called with rating, category, message and page. |