‹ components

WizardSteps

draftv0.9.0·open in canvas

Multi-step flow rail + fixed-height panel for send / onboarding. Visited steps jumpable; Next/Finish width-stable. Interior wizard-steps contract, CSS-only.

Installnpx shadcn add @cids/wizard-steps
Live demo

Step 1 of 2: Amount

Amount

  2. Step 2 of 2: Review

Enter how much to send.

Motion · tap to replay

honors reduced-motion

Tile scale / connector `scaleX` / label opacity 150ms. No `motion` package.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { WizardSteps } from "@/design-system";

<WizardSteps
  steps={[
    { id: "amount", label: "Amount", content: <AmountInput … /> },
    { id: "review", label: "Review", content: <p>…</p> },
  ]}
  finishLabel="Send"
  onComplete={submit}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

currentvisitedfuturefirstlast

Multi-step flow rail + fixed-height panel for send / onboarding. Visited steps jumpable; Next/Finish width-stable. Interior wizard-steps contract, CSS-only.

Anatomy

Step label
(1)—(2)—(3)     ← rail; past = check, future inert
┌─────────────────────┐
│ panel (fixed height)│
└─────────────────────┘
[Back]        [Next|Finish]

Props

PropTypeDefaultNotes
steps{ id, label, content }[]—Stable id keys the panel.
index / defaultIndexnumberuncontrolled 0Controlled or default.
onIndexChange(i, dir) => void—dir is `1 \-1`.
onComplete() => void—Primary on last step.
heightnumber184Panel viewport px.
backLabel / nextLabel / finishLabelstringBack / Next / FinishFinish shares grid with Next.
labelstring"Steps"Rail list name.
classNamestring—cn-merged.

Motion

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.