Components
Wizard
A steps + pager wizard that manages index state internally — visited steps can be revisited, future steps are locked
Installation
- $npx litefy@latest add wizard
- $pnpm dlx litefy@latest add wizard
- $yarn dlx litefy@latest add wizard
- $bun --bun litefy@latest add wizard
Usage
Pass steps for the progress indicator and one child per step — the Wizard manages index state internally.
- Account
- Profile
- Confirm
"use client";
import { Wizard } from "@/ui";
const steps = [{ title: "Account" }, { title: "Profile" }, { title: "Confirm" }];
export default function WizardBasicDemo() {
return (
<Wizard steps={steps} onFinish={() => window.alert("Submitted")}>
<form className="flex h-full w-full flex-col justify-center gap-3 rounded-lg border p-4">
<label className="text-sm font-medium">Email</label>
<input
className="h-9 rounded-md border bg-background px-3 text-sm"
placeholder="you@example.com"
/>
<label className="text-sm font-medium">Password</label>
<input
type="password"
className="h-9 rounded-md border bg-background px-3 text-sm"
placeholder="••••••••"
/>
</form>
<form className="flex h-full w-full flex-col justify-center gap-3 rounded-lg border p-4">
<label className="text-sm font-medium">Display name</label>
<input
className="h-9 rounded-md border bg-background px-3 text-sm"
placeholder="Your name"
/>
<label className="text-sm font-medium">Bio</label>
<textarea
className="min-h-16 rounded-md border bg-background px-3 py-2 text-sm"
placeholder="Tell something about yourself"
/>
</form>
<div className="flex h-full w-full flex-col items-center justify-center gap-2 rounded-lg border p-4">
<p className="text-sm font-medium">Ready to submit</p>
<p className="max-w-64 text-center text-sm text-muted-foreground">
Review your account and profile information, then submit the form.
</p>
</div>
</Wizard>
);
}
CLI installation must add all three — litefy add wizard steps pager — since the Wizard is built on Steps and Pager.
Inline Variant
Wizard.Inline (also exported as InlineWizard) renders the same state machine as a vertical steps accordion — only the current step expands.
- AccountCreate your login
- ProfileTell us a bit about yourself
- ConfirmReview and finish
"use client";import * as React from "react";import { InlineWizard } from "@/ui";export default function Demo() { const [username, setUsername] = React.useState(""); const [finished, setFinished] = React.useState(false); return ( <div className="w-full max-w-md"> <InlineWizard steps={[ { title: "Account", description: "Create your login", content: ( <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" className="w-full rounded-md border bg-transparent px-2 py-1 text-sm" /> ), }, { title: "Profile", description: "Tell us a bit about yourself", content: ( <p className="text-muted-foreground"> Profile details would be collected here. </p> ), }, { title: "Confirm", description: "Review and finish", content: ( <p className="text-muted-foreground"> Review your setup for <span className="font-medium">{username || "—"}</span>. </p> ), }, ]} onFinish={() => setFinished(true)} /> {finished && ( <p className="mt-3 text-sm text-success">Wizard finished — reload to restart.</p> )} </div> );}| Prop | Type | Default | Description |
|---|---|---|---|
steps | { title?; description?; content: React.ReactNode }[] | - | Step definitions. Required |
defaultIndex / index | number | 0 | Step index (uncontrolled / controlled) |
onIndexChange | (index: number) => void | - | Step change callback |
onFinish | () => void | - | Finish button callback on the last step |
maxIndex | number | last step | Furthest reachable step |
backLabel / nextLabel / finishLabel | React.ReactNode | "Back" / "Continue" / "Finish" | Button labels |
disabled | boolean | false | Disable navigation |
className | ClassNameValue | - | Custom classes, applied to the list |
classNames | marker / title / description / connector / content / footer / button / primaryButton | - | Custom classes per part |
Disabled
Pass disabled to freeze the inline variant's Back / Continue buttons — e.g. while an async submission is in flight.
- AccountCreate your login
Back and Continue are frozen while the account is being verified.
- ProfileTell us about yourself
- ConfirmReview and finish
"use client";
import { InlineWizard } from "@/ui";
export default function Demo() {
return (
<div className="w-full max-w-md">
<InlineWizard
disabled
onFinish={() => {}}
steps={[
{
title: "Account",
description: "Create your login",
content: (
<p className="text-sm text-muted-foreground">
Back and Continue are frozen while the account is being verified.
</p>
),
},
{
title: "Profile",
description: "Tell us about yourself",
content: (
<p className="text-sm text-muted-foreground">
Profile details would be collected here.
</p>
),
},
{
title: "Confirm",
description: "Review and finish",
content: (
<p className="text-sm text-muted-foreground">
Review your setup to finish.
</p>
),
},
]}
/>
</div>
);
}
API Reference
useWizardNavigation
The exported wizard state machine for building custom wizard shells: useWizardNavigation({ count, defaultIndex?, index?, maxIndex?, onIndexChange? }) returns { index, maxVisited, maxReachable, isFirst, isLast, isReachable, go }.
Wizard
A wizard component that manages step navigation state and renders Steps indicator, Pager body, and footer buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
steps | StepsItemConfig[] | - | Step configurations for the progress indicator |
children | React.ReactNode[] | - | Page content, one child per step |
onFinish | () => void | - | Fired when the Submit button is clicked |
className | ClassNameValue | - | Custom class names, applied to the root |
classNames | { root? / steps? / pager? / footer? } | - | Custom class names per slot |