Stepper

Data-driven multi-step progress stepper component for checkout wizards, onboarding flows, dialog sequences, and status trackers.

// Plain markup
import { Stepper } from "@shavin/ui";

Titles only [Default]

Minimalist default progress indicator showing clean numbered steps with connected tracking lines.

const STEPS = [
  { title: "Account" },
  { title: "Profile" },
  { title: "Workspace" },
  { title: "Done" },
];

const [current, setCurrent] = useState(1);

<Stepper
  steps={STEPS}
  current={current}
  onStepClick={(i) => setCurrent(i)}
/>

With Description

Progress stepper pairing step titles with contextual descriptions.

const STEPS = [
  { title: "Account", description: "Email & password" },
  { title: "Profile", description: "Name & avatar" },
  { title: "Workspace", description: "Team setup" },
  { title: "Done", description: "Review & finish" },
];

const [current, setCurrent] = useState(1);

<Stepper
  steps={STEPS}
  current={current}
  onStepClick={(i) => setCurrent(i)}
/>

Cards variant

Interactive card buttons arranged in a responsive grid layout. Clicking completed steps navigates back.

Step 2 of 4 (Click steps to jump)

Interactive card buttons arranged in a responsive grid layout. Clicking completed steps navigates back.

const WIZARD_STEPS = [
  { title: "Heads up", description: "Guidelines" },
  { title: "Block", description: "Metadata" },
  { title: "Preview", description: "Render & Code" },
  { title: "Summary", description: "Publish" },
];

const [current, setCurrent] = useState(1);

<Stepper
  steps={WIZARD_STEPS}
  current={current}
  variant="cards"
  size="sm"
  onStepClick={(i) => setCurrent(i)}
/>

Pills variant

Compact inline badges for space-constrained toolbars or secondary flow headers.

<Stepper
  steps={STEPS}
  current={current}
  variant="pills"
  onStepClick={(i) => setCurrent(i)}
/>

Vertical orientation

Vertical progression layout for sidebars, timeline audits, and long-form workflows.

<Stepper steps={STEPS} current={2} orientation="vertical" />

Props

Prop	Type	Default	Description
steps*	Step[]	—	Array of step definitions ({ title, description, icon, disabled }).
current*	number	—	0-based active step index.
orientation	"horizontal" \| "vertical"	horizontal	Layout orientation: "horizontal" or "vertical". @default "horizontal"
variant	"default" \| "cards" \| "pills"	default	Visual variant: "default" (connected circles), "cards" (multi-step wizard cards), or "pills". @default "default"
size	"sm" \| "md"	md	Size variant: "sm" or "md". @default "md"
onStepClick	(stepIndex: number) => void	—	Callback fired when an interactive step is clicked.
clickable	boolean \| "completed" \| "all"	completed	Which steps can be clicked: "completed" (default when onStepClick is set), "all", or false. @default "completed"
className	string	—	—

* required