CleenUI · Project Management · Wizard

Wizard

Pro

Multi-step flow with validated transitions, progress persistence, and branching paths.

storybook.cleenui.com
Open Storybook
Live preview

Interactive Wizard preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About Wizard

Wizard is the multi-step form primitive. Each step renders its own content; transitions can be gated on validation; users can save progress and return later. Branching logic lets the user's step-N answer determine which step-N+1 they see.

Progress is automatically persisted to the backend so a user can close their browser and resume hours or days later. Step state can also be derived from URL so each step is independently linkable.

When to use it

  • Onboarding flows with conditional steps.
  • Multi-page application or signup forms.
  • Configuration wizards in admin tooling.
  • Compliance or KYC flows requiring step-by-step validation.

Common props

Prop
Type
Description
steps
Step[]
Step definitions {key, label, render, validate}.
currentStep
string
Currently active step key (controlled).
onStepChange
(step) => void
Fires when step changes.
persistKey
string
Backend persistence key for saved progress.
branches
Branch[]
Conditional step-routing rules.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

1

Used in templates

1
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.