# Shadcn Wizard blocks

> Multi-step form flows with progress indicators, validation, and step navigation.

- Type: Pro blocks (Application)
- Page: https://web.dev.reui.io/blocks/application/wizard
- 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: 7
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- Money tasks done in steps: account billing setup, sending an invoice, a seat upgrade or a fund transfer
- Admin intake in steps: a vendor compliance file, a store product with variants or a batch of team invites
- A long form split into 3 to 5 numbered steps with previous and next buttons and a summary before submit

## When not to use

- A first run setup right after signup that collects a profile, a role and goals: use the [Onboarding blocks](https://web.dev.reui.io/blocks/application/onboarding.md)
- Only numbered step markers and panel switching around fields you already built: use [Stepper](https://web.dev.reui.io/components/stepper.md) (`get_component("stepper")`)
- A shopper paying for a cart, entering shipping and card details beside an order summary: use the [Checkout blocks](https://web.dev.reui.io/blocks/ecommerce/checkout.md)

## Agent notes

- Steps come from `WIZARD_STEPS`, `PRODUCT_STEPS` or `PAYMENT_STEPS` in the data file, and each step id has its own render branch; add both for a new step
- No step calls an API: the final button shows a sonner `toast`, sets local state such as `isIssued`, or both; post the collected values from that handler
- Each page.tsx sets a `min-h-svh` wrapper and the full screen variants size their root to the viewport too; remove both inside an app shell or dialog

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 6 of 7 blocks
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 2 of 7 blocks (the docs follow the latest Motion, with no React API break since v12)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 2 of 7 blocks
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 1 of 7 blocks
- Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt), used by 1 of 7 blocks

## Blocks

- [Billing Setup](https://web.dev.reui.io/blocks/application/wizard/wizard-1.md): Three-step billing setup wizard card with horizontal stepper, per-step validation, review summary. Best for a narrow card for an owner profile with an @ handle, then billing email, cycle, spend limit, PO number and a billing alerts switch.
- [Vendor Onboarding](https://web.dev.reui.io/blocks/application/wizard/wizard-2.md): Three-step procurement vendor onboarding wizard with per-step validation and review summary. Best for vendor due diligence with add and remove beneficial owner rows, an attestation box and a document checklist that needs 2 picks.
- [Send Invoice](https://web.dev.reui.io/blocks/application/wizard/wizard-3.md): Invoice send wizard with step progress bar, line-item table, and live tax and discount totals. Best for a full page editor with a thin progress bar in a sticky header, a line item table with per row tax and a discount on the last step.
- [Plan Upgrade](https://web.dev.reui.io/blocks/application/wizard/wizard-4.md): Four-step billing upgrade wizard with live invoice preview sidebar and due-today total. Best for plan radio cards and a seat slider beside an invoice preview shown on every step, whose due today total follows plan, seats and cycle.
- [Team Invitations](https://web.dev.reui.io/blocks/application/wizard/wizard-5.md): Three step team invitation wizard with per-row role assignment and pre-send review. Best for email rows with a role each and a live Ready, Needs role or Invalid email badge, ending in a queued state with a New batch reset.
- [Product Setup Wizard](https://web.dev.reui.io/blocks/application/wizard/wizard-6.md): Five-step ecommerce product creation wizard with variant options and SKU matrix. Best for a 5 step sidebar layout with an image dropzone, swatch option groups and a SKU table whose add dialog rejects duplicate combinations.
- [Fund Transfer](https://web.dev.reui.io/blocks/application/wizard/wizard-7.md): Four-step fund transfer wizard with payee search, currency combobox, and balance checks. Best for payee tiles and a searchable account list, a currency picker with flags, a balance shortfall alert and a 6 digit code to authorize.

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.