For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- Only numbered step markers and panel switching around fields you already built: use the Stepper component
- A shopper paying for a cart, entering shipping and card details beside an order summary: use the Checkout blocks
Agent notes
- Steps come from
WIZARD_STEPS,PRODUCT_STEPSorPAYMENT_STEPSin 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 asisIssued, or both; post the collected values from that handler - Each page.tsx sets a
min-h-svhwrapper and the full screen variants size their root to the viewport too; remove both inside an app shell or dialog
Third-party API docs
- Sonner v2: API reference, docs, used by 6 of 7 blocks
- Motion v12: API reference, docs, used by 2 of 7 blocks (the docs follow the latest Motion, with no React API break since v12)
- React DayPicker v9: API reference, docs, used by 2 of 7 blocks
- date-fns v4: docs, used by 1 of 7 blocks
- Base UI v1: API reference, docs, llms.txt, used by 1 of 7 blocks
Markdown
https://web.dev.reui.io/blocks/application/wizard.mdMCP
search({ query: "wizard", type: "block", category: "wizard" })Shadcn Wizard Blocks: Multi-Step Forms with Validation and Progress
A wizard is a form that admits it is long. These blocks use the ReUI Stepper with React Hook Form per-step validation, so a step cannot be left half done, the progress indicator tells the truth, and the review step shows everything before the submit.
All Wizard Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Billing Setup Three-step billing setup wizard card with horizontal stepper, per-step validation, review summary
- Vendor Onboarding Three-step procurement vendor onboarding wizard with per-step validation and review summary
- Send Invoice Invoice send wizard with step progress bar, line-item table, and live tax and discount totals
- Plan Upgrade Four-step billing upgrade wizard with live invoice preview sidebar and due-today total
- Team Invitations Three step team invitation wizard with per-row role assignment and pre-send review
- Product Setup Wizard Five-step ecommerce product creation wizard with variant options and SKU matrix
- Fund Transfer Four-step fund transfer wizard with payee search, currency combobox, and balance checks
What the Wizard blocks cover
Application screens, each a full block with fixture data:
- Three-step billing setup wizard card with horizontal stepper, per-step validation, review summary
- Three-step procurement vendor onboarding wizard with per-step validation and review summary
- Invoice send wizard with step progress bar, line-item table, and live tax and discount totals
- Four-step billing upgrade wizard with live invoice preview sidebar and due-today total
- Three step team invitation wizard with per-row role assignment and pre-send review
- Five-step ecommerce product creation wizard with variant options and SKU matrix
- Four-step fund transfer wizard with payee search, currency combobox, and balance checks
Built from
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Can steps be skipped or optional?
Yes. The Stepper supports optional steps and the blocks show the affordance and the review-step handling for a skipped one.
How do I install a Wizard block?
Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.
Is a license needed?
Wizard blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.