A three step onboarding modal: pick a role, name and color the workspace, then invite teammates as email chips. Steps slide in the direction you move and the dialog height follows the content.
Step 1 of 3 · Your role
We will tailor templates and views to how you work.
npx shadcn@latest add https://hyperblur.dev/r/modal-onboarding-steps.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/modal-onboarding-steps.tsx.
import { ModalOnboardingSteps } from "@/components/hyperblur/modal-onboarding-steps"
<ModalOnboardingSteps onComplete={(result) => createWorkspace(result)} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state. Leave undefined to let the component manage it. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. Defaults to true when embedded so the preview shows the dialog. |
| onOpenChange | (open: boolean) => void | undefined | Called whenever the dialog opens or closes. |
| embedded | boolean | false | Renders the dialog inside its parent (absolute, not fixed) without scroll lock, for previews and docs. |
| trigger | ReactNode | null | "Get started" | Label of the built-in trigger button. Pass null to hide it and control the dialog with open. |
| product | string | "Relay" | Product name used in the first step. |
| domain | string | "relay.so" | Domain shown in the workspace URL preview. |
| roles | { id: string; label: string; hint: string; icon: string }[] | 4 roles | Role cards in step one. icon is an SVG path in a 16 by 16 box. |
| colors | string[] | 6 swatches | Workspace avatar colors in step two. |
| defaultStep | number | 0 | Step shown when the modal opens (3 is the finished screen). |
| onStepChange | (step: number) => void | undefined | Called on every step change. |
| onComplete | (result: { role: string; workspace: string; color: string; invites: string[] }) => void | undefined | Called when the last step is completed. |
| accent | string | "#22d3ee" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |