A one-question-per-screen sign-up that slides each question in with a blur, advances on Enter and toggles choices with number keys. Beside it a member pass builds itself live from the answers, with a gradient avatar, workspace address, chosen uses and a stamp when the account is created.
npx shadcn@latest add https://hyperblur.dev/r/auth-flow-signup-wizard.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-flow-signup-wizard.tsx.
import { AuthFlowSignupWizard } from "@/components/hyperblur/auth-flow-signup-wizard"
<AuthFlowSignupWizard brand="Ledgerline" domain="ledgerline.app" onSubmit={async (values) => api.signUp(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Ledgerline" | Product name on the pass and in the success copy. |
| domain | string | "ledgerline.app" | Domain appended to the workspace address. |
| uses | string[] | 5 use cases | Choices for the use case question. The first nine get number shortcuts. |
| defaultValues | Partial<{ name; email; workspace; uses: string[]; password }> | {} | Prefilled answers. |
| defaultStep | number | 0 | Question shown first, from 0 to 4. |
| onStepChange | (step: number) => void | Called whenever the question changes. | |
| onSubmit | (values: { name; email; workspace; uses; password }) => void | Promise<unknown> | Called after the last question. A promise keeps the button loading; a rejection shows its message. | |
| headingAs | "h1" | "h2" | "h3" | "h2" | Level of the visually hidden heading. |
| accent | string | "#f97316" | Progress, focus underline, chips and stamp color. |