A four step onboarding wizard with a segmented progress rail, direction aware slides and a review step with edit links. Creating the workspace plays a short setup checklist.
npx shadcn@latest add https://hyperblur.dev/r/form-wizard.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-wizard.tsx.
import { FormWizard } from "@/components/hyperblur/form-wizard"
<FormWizard onSubmit={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| domain | string | "app.tempo.so/" | Prefix shown before the workspace URL. |
| sizes | string[] | ["Just me", "2-10", "11-50", "51+"] | Team size options. |
| teams | string[] | ["Design", "Engineering", "Product", "Marketing", "Ops"] | Teams the user can pick. |
| maxInvites | number | 5 | Maximum number of invite emails. |
| accent | string | "#14b8a6" | Accent color for focus rings, selected states and the primary button. |
| defaultStep | number | 0 | Step shown on mount, 0 to 3. |
| defaultValues | Partial<FormWizardValues> | Prefilled workspace, slug, size, teams and invites. | |
| onStepChange | (step: number) => void | Called whenever the visible step changes. | |
| onSubmit | (values: FormWizardValues) => void | Promise<void> | Called when the user creates the workspace. |