# Onboarding Dialog block

> Multi-step workspace onboarding dialog with dot stepper, animated steps, and success screen

Six-step modal wizard (profile, role, workspace, goals, teammate invites) with clickable dot stepper, animated steps, and a success screen. shadcn Dialog, Field, Combobox, Select, RadioGroup, Switch, Avatar upload, Button. For signup, get started.

- Type: Pro block
- Category: [Onboarding](https://web.dev.reui.io/blocks/application/onboarding.md)
- Page: https://web.dev.reui.io/blocks/application/onboarding/onboarding-5
- MCP: `get_block("onboarding-5")`
- Built with: Avatar, Button, Checkbox, Combobox, Dialog, Field, Icon Stack, Input, Item, Radio Group, Select, Spinner, Switch
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A modal that opens on load over a Launch button, with dot buttons that jump to any step and no Skip

## Agent notes

- `open` starts true and a built-in Launch button calls `setOpen`; control `open` from your own trigger and drop the launcher
- `StepDots` passes any dot click to `goToStep` unchecked, so users can reach the last step without passing the goals rule in `canContinue`
- Open workspace only calls `setOpen` to close the dialog; navigate into your app from that handler and from `handleSubmit`

## When not to use

- A full-page flow with a Skip button on the middle steps and progress in a top bar: use [Centered Setup Flow](https://web.dev.reui.io/blocks/application/onboarding/onboarding-4.md) (`get_block("onboarding-4")`)
- Only teammates need inviting, with an email and a role per row: use [Per-Person Invite](https://web.dev.reui.io/blocks/application/dialog/dialog-8.md) (`get_block("dialog-8")`)

## Third-party libraries

- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)

## Install

```bash
npx shadcn@latest add @reui/onboarding-5
```

## About Onboarding blocks

### When to use

- A first-run setup after signup that collects profile, role, team size, goals and teammate invites
- Workspace creation shown as a full page, beside a product preview or in a modal over the app
- Developer tool signups that end by picking a coding agent and copying its CLI install commands

### When not to use

- A multi-step business task such as billing, vendor intake, a product listing or a transfer: use the [Wizard blocks](https://web.dev.reui.io/blocks/application/wizard.md)
- Only a progress indicator to place above step content you already built: use [Stepper](https://web.dev.reui.io/components/stepper.md) (`get_component("stepper")`)
- A purchase flow with shipping, payment and an order summary beside the steps: use the [Checkout blocks](https://web.dev.reui.io/blocks/ecommerce/checkout.md)

### Agent notes

- `completeOnboarding` only waits on a `window.setTimeout` before the ready screen; post the collected answers to your API there
- Replace `ONBOARDING_STEPS`, `ROLE_OPTIONS`, `GOAL_OPTIONS` and `DEFAULT_INVITES` in data.tsx; the step order and titles come from `ONBOARDING_STEPS`
- The timezone `Combobox` over `TIMEZONE_GROUPS` takes no `value` or `onValueChange`, so the picked zone never reaches component state

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.