Progress Wizard

A "Typeform" style multi-step wizard featuring buttery smooth vertical slide transitions powered by plain CSS transitions, native keyboard navigation, and an interactive progress bar.

This component relies on the Compound Component pattern using React Context. This allows you to place the WizardProgress bar independently of the main WizardContainer, and nest complex forms inside the WizardStep blocks without passing deep props.

Because every piece reads the wizard's state from context, you compose the flow yourself — drop the progress bar wherever you like, or leave it out. Press Enter inside any step to advance. It includes dynamic theme binding via the color prop ("indigo", "rose", "emerald", "zinc", "blue", "primary", or hex) to automatically style the progress bar, input focus rings, and action buttons.

Wizard

Compose WizardProgress, WizardContainer and one WizardStep per question — all state lives in context.

Setcolor"indigo" | "blue" | "rose" | "emerald" | "zinc" | "primary" | "#hex": themes the progress bar, active input borders, and primary navigation buttons.
index: on each WizardStep is its 0-based position, and is what the animation uses to compute the Y-offset.
onComplete: fires when Next or Enter is pressed on the final step.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Wizard

npx shadcn@latest add @algorize-ui/wizard

components/custom/blocks/WizardBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Wizard needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Starting step

UseinitialStep: to resume a flow partway through instead of restarting it.

Without the progress bar

children: can omit WizardProgress entirely — it is an independent child, and navigation is unchanged without it.

Features

Learn about the Wizard component's multi-step capabilities, providing state management and validation for complex onboarding flows.

Compound Components

Uses React Context to share state across child components, preventing messy prop drilling and enabling flexible layouts.

Library-free Animations

Features premium, buttery smooth vertical sliding transitions built on CSS transitions — no animation library to install.

Keyboard Navigation

Natively supports "Enter" key progression to submit forms and move to the next step instantly.

Auto-Progress Bar

Automatically calculates completion percentage based on the number of active steps rendered.

Best Practices & Guidelines

State Management

Since WizardStep components act as independent layout blocks, keep your actual form state (e.g., using React Hook Form or standard state) lifted up to the parent component wrapping the WizardContainer.

Props Reference

Component	Prop	Type	Default	Description
`Wizard`	`initialStep`	`number`	`0`	The index of the step to show on the initial render.
`Wizard`	`color`	`"primary" \| "indigo" \| "blue" \| "rose" \| "emerald" \| "zinc" \| string`	`"primary"`	Controls the theme color for the progress bar, active input borders, and primary navigation buttons. Accepts valid hex codes.
`Wizard`	`onComplete`	`() => void`	`undefined`	Callback function fired if the user clicks "Next" or presses "Enter" while currently on the final step.
`WizardStep`	`index`	`number`	Required	The 0-based index of this specific step. Used by the animation engine to calculate the vertical Y-offset relative to the `currentStep`.
`WizardInput`	`...props`	`InputHTMLAttributes`	`undefined`	Accepts all native HTML input attributes (e.g., `placeholder`, `autoFocus`, `onChange`, `type`).
`WizardTitle`	`children`	`ReactNode`	Required	The primary heading or question for the current step.
`WizardDescription`	`children`	`ReactNode`	Required	Secondary context or helper text displayed below the title.