Onboarding wizard

Three-step onboarding card (profile, terms, workspace) with a spring-filled stepper, direction-aware sliding panels, a live slug preview and a confetti success state.

TypeScript Source with Startup & Business plans Light & dark

1Profile
2Terms
3Workspace

Set up your profile

Pick an avatar and tell your team what to call you.

Full name

Step 1 of 3

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { OnboardingWizard } from '@/components/component-kit/items/block-onboarding-wizard';
2
3export function Example() {
4  return <OnboardingWizard onComplete={(data) => console.log(data)} />;
5}

Props

Onboarding wizard properties
Prop	Type	Default	Description
`avatars`	`{ src: string; alt: string }[]`	`5 Lorelei avatars from DiceBear`	Avatars to pick from; colored initials show while one loads or if it fails.
`steps`	`[string, string, string]`	`["Profile", "Terms", "Workspace"]`	Labels for the three steps in the stepper.
`defaultName`	`string`	`"Ada Lovelace"`	Initial value of the full-name field; also drives the avatar initials.
`onComplete`	`(data: OnboardingData) => void`	`undefined`	Called when "Create workspace" is pressed with { avatar, fullName, acceptedTerms, workspaceName, slug }.
`autoPlay`	`boolean`	`false`	Loops through the three steps every 1.6s after hydration, not under reduced motion; for inert previews.
`compact`	`boolean`	`false`	Tighter padding, no helper text and no footer buttons, for small cards.

Onboarding wizard

Three-step onboarding card (profile, terms, workspace) with a spring-filled stepper, direction-aware sliding panels, a live slug preview and a confetti success state.

TypeScript Source with Startup & Business plans Light & dark

1Profile
2Terms
3Workspace

Set up your profile

Pick an avatar and tell your team what to call you.

Full name

Step 1 of 3

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { OnboardingWizard } from '@/components/component-kit/items/block-onboarding-wizard';
2
3export function Example() {
4  return <OnboardingWizard onComplete={(data) => console.log(data)} />;
5}

Props

Onboarding wizard properties
Prop	Type	Default	Description
`avatars`	`{ src: string; alt: string }[]`	`5 Lorelei avatars from DiceBear`	Avatars to pick from; colored initials show while one loads or if it fails.
`steps`	`[string, string, string]`	`["Profile", "Terms", "Workspace"]`	Labels for the three steps in the stepper.
`defaultName`	`string`	`"Ada Lovelace"`	Initial value of the full-name field; also drives the avatar initials.
`onComplete`	`(data: OnboardingData) => void`	`undefined`	Called when "Create workspace" is pressed with { avatar, fullName, acceptedTerms, workspaceName, slug }.
`autoPlay`	`boolean`	`false`	Loops through the three steps every 1.6s after hydration, not under reduced motion; for inert previews.
`compact`	`boolean`	`false`	Tighter padding, no helper text and no footer buttons, for small cards.

Onboarding wizard

Three-step onboarding card (profile, terms, workspace) with a spring-filled stepper, direction-aware sliding panels, a live slug preview and a confetti success state.

TypeScript Source with Startup & Business plans Light & dark

1Profile
2Terms
3Workspace

Set up your profile

Pick an avatar and tell your team what to call you.

Full name

Step 1 of 3

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { OnboardingWizard } from '@/components/component-kit/items/block-onboarding-wizard';
2
3export function Example() {
4  return <OnboardingWizard onComplete={(data) => console.log(data)} />;
5}

Props

Onboarding wizard properties
Prop	Type	Default	Description
`avatars`	`{ src: string; alt: string }[]`	`5 Lorelei avatars from DiceBear`	Avatars to pick from; colored initials show while one loads or if it fails.
`steps`	`[string, string, string]`	`["Profile", "Terms", "Workspace"]`	Labels for the three steps in the stepper.
`defaultName`	`string`	`"Ada Lovelace"`	Initial value of the full-name field; also drives the avatar initials.
`onComplete`	`(data: OnboardingData) => void`	`undefined`	Called when "Create workspace" is pressed with { avatar, fullName, acceptedTerms, workspaceName, slug }.
`autoPlay`	`boolean`	`false`	Loops through the three steps every 1.6s after hydration, not under reduced motion; for inert previews.
`compact`	`boolean`	`false`	Tighter padding, no helper text and no footer buttons, for small cards.

Onboarding wizard

Three-step onboarding card (profile, terms, workspace) with a spring-filled stepper, direction-aware sliding panels, a live slug preview and a confetti success state.

TypeScript Source with Startup & Business plans Light & dark

1Profile
2Terms
3Workspace

Set up your profile

Pick an avatar and tell your team what to call you.

Full name

Step 1 of 3

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { OnboardingWizard } from '@/components/component-kit/items/block-onboarding-wizard';
2
3export function Example() {
4  return <OnboardingWizard onComplete={(data) => console.log(data)} />;
5}

Props

Onboarding wizard properties
Prop	Type	Default	Description
`avatars`	`{ src: string; alt: string }[]`	`5 Lorelei avatars from DiceBear`	Avatars to pick from; colored initials show while one loads or if it fails.
`steps`	`[string, string, string]`	`["Profile", "Terms", "Workspace"]`	Labels for the three steps in the stepper.
`defaultName`	`string`	`"Ada Lovelace"`	Initial value of the full-name field; also drives the avatar initials.
`onComplete`	`(data: OnboardingData) => void`	`undefined`	Called when "Create workspace" is pressed with { avatar, fullName, acceptedTerms, workspaceName, slug }.
`autoPlay`	`boolean`	`false`	Loops through the three steps every 1.6s after hydration, not under reduced motion; for inert previews.
`compact`	`boolean`	`false`	Tighter padding, no helper text and no footer buttons, for small cards.