# Shadcn Onboarding blocks

> User onboarding flows with step indicators, welcome screens, and guided setup wizards.

- Type: Pro blocks (Application)
- Page: https://web.dev.reui.io/blocks/application/onboarding
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/stepper.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/stepper.md
- Blocks: 9
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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

## Third-party libraries

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

## Blocks

- [Live Preview Wizard](https://web.dev.reui.io/blocks/application/onboarding/onboarding-1.md): Six-step workspace onboarding wizard with stepper progress and a live inbox preview pane. Best for a two-pane Card whose mock inbox preview echoes the entered name, workspace initial, role and team size live.
- [Sidebar Stepper Wizard](https://web.dev.reui.io/blocks/application/onboarding/onboarding-2.md): Six-step workspace onboarding wizard with left sidebar vertical stepper and animated success state. Best for a left rail of numbered steps with one-line blurbs that jump back to earlier steps, over a dithered wave shader.
- [Split-Screen Signup](https://web.dev.reui.io/blocks/application/onboarding/onboarding-3.md): Split-screen workspace onboarding wizard with vertical stepper sidebar and animated dot-sphere panel. Best for a dark rounded side panel with a canvas dot sphere animation behind ring step markers and Terms and Help buttons.
- [Centered Setup Flow](https://web.dev.reui.io/blocks/application/onboarding/onboarding-4.md): Six-step workspace onboarding wizard with top progress bar and success screen. Best for a single centered ghost Frame of fields with no preview, sidebar or background art, under a thin spring-filled top bar.
- [Onboarding Dialog](https://web.dev.reui.io/blocks/application/onboarding/onboarding-5.md): Multi-step workspace onboarding dialog with dot stepper, animated steps, and success screen. Best for a modal that opens on load over a Launch button, with dot buttons that jump to any step and no Skip.
- [Agent & API Setup](https://web.dev.reui.io/blocks/application/onboarding/onboarding-6.md): Eight-step workspace onboarding wizard with progress stepper, AI agent picker, copyable API setup. Best for a pill progress bar with a step count in the header, a Previous, Skip and Next footer bar, and agent pick plus API setup steps.
- [Screenshot Carousel Setup](https://web.dev.reui.io/blocks/application/onboarding/onboarding-7.md): Six-step workspace onboarding wizard with top progress bar and screenshot carousel rail. Best for a stack of 3 light and dark image pairs rotating every 5.6 seconds beside the form, with Optional badges on the source and invite steps.
- [CLI Agent Setup](https://web.dev.reui.io/blocks/application/onboarding/onboarding-8.md): Dark 8-step workspace onboarding wizard with progress bar, agent picker, and CLI setup checklist. Best for an always dark page with a dashed plus-cornered card that eases its height per step, ending in an agent pick and Codex CLI setup.
- [Marketing Hero Signup](https://web.dev.reui.io/blocks/application/onboarding/onboarding-9.md): Six-step workspace onboarding wizard with marketing hero and animated progress bar. Best for a marketing headline and status pill beside the form Card, over drifting orange, pink, violet and blue blur blobs.

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.