A three-step sign-up wizard for account, workspace and team invites, with a progress rail, sliding step transitions and validation on every step.
Create your account, name your workspace and bring your team. It takes about two minutes.
npx shadcn@latest add https://hyperblur.dev/r/auth-signup-steps.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-signup-steps.tsx.
import { AuthSignupSteps } from "@/components/hyperblur/auth-signup-steps"
<AuthSignupSteps brand="Relay" domain="relay.so" onSubmit={async (values) => createWorkspace(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "14-day free trial, no card required" | Small pill above the title. |
| title | string | "Set up Relay in three short steps" | Section heading. |
| subtitle | string | "Create your account, name your workspace..." | Supporting line under the heading. |
| brand | string | "Relay" | Product name in the rail and the sign-in prompt. |
| domain | string | "relay.so" | Domain shown after the workspace address. |
| steps | { title: string; heading: string; description: string }[] | Account, Workspace, Invite team | Labels for the three steps: rail title, panel heading and description. |
| teamSizes | string[] | ["1-10", "11-50", "51-200", "200+"] | Options of the team size picker. |
| roles | string[] | ["Engineering", "Product", "Design", "Operations", "Founder"] | Options of the role select. |
| signin | { label: string; href: string } | null | { label: "Sign in", href: "#signin" } | Sign-in link at the bottom of the rail. Pass null to hide it. |
| successCta | { label: string; href: string } | { label: "Open your workspace", href: "#workspace" } | Button shown on the success screen. |
| onStepChange | (step: number) => void | Called with the zero-based step index whenever the wizard moves. | |
| onSubmit | (values: { name; email; password; workspace; slug; teamSize; role; invites: string[] }) => void | Promise<unknown> | Called on the last step with every value. A returned promise keeps the loading state until it settles; a rejection shows its message. | |
| accent | string | "#10b981" | Progress, focus ring and primary button color. |