OnboardingPro

Five steps beside a progress rail: an account with live password rules, a 6-digit code, a workspace whose address is checked as you type, invites, and a dashboard to start from.

When to use

A five-step onboarding: an account, a code by email, a workspace and its address, a template, then in.
New products' first-run flow, from sign-up to a working workspace.

When not to use

Products people can use before setting anything up: let them in, and use Getting started on the home page.
People joining a workspace someone invited them to: most of its steps don't apply; Sign up, split is enough.

Usage

Onboarding with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { Onboarding } from "@/components/dashral/blocks/onboarding"
2
3<Onboarding
4  brand="Acme"
5  onCreateAccount={(account) => api.auth.register(account)}
6  onVerify={(code) => api.auth.verify(code)}
7  checkSlug={(slug) => api.workspaces.isFree(slug)}
8  onFinish={(setup) => api.workspaces.create(setup)}
9  dashboardHref="/app"
10/>

API reference

Onboarding

Onboarding in five steps, beside a rail that shows where you are: an account (Google, or a name, email and a password whose rules tick as you type), a 6-digit code (it moves along as you type, takes a paste, and can be sent again after 30 seconds), a workspace whose address follows its name and is checked as you type (with free ones to pick when it's taken), teammates to invite (or skip), and a dashboard to start from. Finishing sets it all up step by step, then welcomes you. Every step calls your handler when you give it one (a thrown Error shows its message on that step); without them it plays a sample, where any code but 000000 works.

Prop	Type	Default
`brand`	`string`	`"Acme"`
`host`	`string` Where workspaces live: shown before the address, e.g. "app.acme.com".	`"app.acme.com"`
`templates`	`OnboardingTemplate[]`	`sample`
`onCreateAccount`	`(account: { name: string; email: string; password: string }) => Promise<void> \| void` Makes the account and sends the code.	—
`onGoogle`	`() => Promise<{ name: string; email: string }> \| { name: string; email: string }` Signs in with Google; resolve with the name and email it gave (the address is verified, so the code step is skipped).	—
`onVerify`	`(code: string) => Promise<void> \| void` Checks the 6-digit code; throw to say it's wrong.	—
`onResend`	`() => Promise<void> \| void`	—
`checkSlug`	`(slug: string) => Promise<boolean> \| boolean` Whether an address is free for a workspace.	—
`onFinish`	`(result: OnboardingResult) => Promise<void> \| void` Sets everything up: the welcome shows once it resolves (its steps tick meanwhile).	—
`dashboardHref`	`string` Where "Open your dashboard" goes.	—
`helpHref`	`string` Where "Chat with us" goes on the rail; none hides the help card.	`"#"`

type OnboardingTemplate

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`detail`	`string`	—
`icon`	`LucideIcon`	—
`tone`	`string`	—

type OnboardingResult

Everything picked along the way, for onFinish.

Prop	Type	Default
`name`	`string`	—
`email`	`string`	—
`workspace`	`string`	—
`slug`	`string`	—
`size`	`string`	—
`role`	`string`	—
`invites`	`string[]`	—
`template`	`string`	—