# Onboarding wizard

> Welcome flow for role, goals, team size and invites, ending with confetti.

Block · Pro · https://lodeui.com/blocks/onboarding-wizard

## When to use

- Right after sign-up, to personalize the product.

## When not to use

- More than five questions: people drop off.

## Installation

```bash
npx shadcn@latest add @lode/onboarding-wizard
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { OnboardingWizard } from "@/components/blocks/onboarding-wizard";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <OnboardingWizard />
    </main>
  );
}
```

Built from: Confetti, Tag input

## API reference

### OnboardingWizard

A welcome flow for role, goals, team size and invites, with a progress bar, skip and a confetti finish. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through choices |
| Enter / Space | Pick |
| Enter or , | Add an invite email |

## Accessibility

- Questions are fieldsets with legends; single choices are radio groups and multi choices are toggle buttons.
- Progress is a labelled progressbar.

## Motion

- Steps slide; choices pop in with a stagger; confetti bursts from the finish button (skipped under reduced motion).

## Responsive behavior

- Choices are 2 columns on phones, 3 on wider screens.

## Performance

- Confetti draws on a temporary canvas that removes itself.

## Notes for AI

- Save answers to the user profile to tailor templates and docs.

## Related

- [Onboarding checklist](https://lodeui.com/blocks/onboarding-checklist) — A setup checklist with progress ring and inline actions.
- [Product tour](https://lodeui.com/components/product-tour) — A guided tour: a spotlight glides between elements with an explaining card.
- [Confetti](https://lodeui.com/components/confetti) — Fire a confetti burst from any point, or use the button that bursts from itself.
- [Tag input](https://lodeui.com/components/tag-input) — Type, paste or pick suggestions to add tags; validates each one.