A. Auth & Onboarding

Onboarding Wizard

A five-step first-run wizard — profile, workspace, team, plan and import — with sidebar and top stepper variants.

8 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash

npx @wunderui/cli add auth/onboarding

02Step 2 — Workspace (top stepper)

Uses: Stepper · Input · Checkbox · Button

components/blocks/auth/onboarding/02-top-stepper-workspace.tsx

Uses: OptionRow · Stepper · Button

components/blocks/auth/onboarding/03-preferences-cards.tsx

Uses: ChecklistTask · Button

components/blocks/auth/onboarding/04-setup-complete.tsx

Uses: Stepper · InviteRow · Switch · TextLinkRow

components/blocks/auth/onboarding/05-invite-team.tsx

Uses: Stepper · Price · Switch · InlineNote · OptionRowGroup

components/blocks/auth/onboarding/06-choose-plan.tsx

Uses: Stepper · OptionRow · Checkbox · Input

components/blocks/auth/onboarding/07-import-data.tsx

Uses: Stepper · Input · OptionRowGroup · Button

components/blocks/auth/onboarding/08-mobile-wizard.tsx