One question at a time with an NPS scale, lettered choices and keyboard shortcuts. Picks confirm with a quick blink and advance on their own, ending on a summary with the score group.
npx shadcn@latest add https://hyperblur.dev/r/form-survey.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-survey.tsx.
import { FormSurvey } from "@/components/hyperblur/form-survey"
<FormSurvey onSubmit={(answers) => console.log(answers)} />| Prop | Type | Default | Description |
|---|---|---|---|
| questions | FormSurveyQuestion[] | 4 sample questions | Questions with id, type (nps, choice, multi, text), title, options, required and placeholder. |
| title | string | "Quick survey" | Label shown above the questions. |
| accent | string | "#ff6b4a" | Accent color for focus rings, selected states and the primary button. |
| autoAdvance | boolean | true | Moves to the next question after a single choice or score. |
| onAnswer | (id: string, value: number | string | string[]) => void | Called on every answer change. | |
| onSubmit | (answers: FormSurveyAnswers) => void | Promise<void> | Called with all answers after the last question. |