Stepper

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

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

Horizontal (interactive)

Account
Email & password
2
Profile
Name & avatar
3
Workspace
Team setup
4
Done
Review & finish

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} />

Vertical

Account
Email & password
Profile
Name & avatar
3
Workspace
Team setup
4
Done
Review & finish

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

Titles only (no descriptions)

Cart
2
Shipping
3
Payment

<Stepper
  steps={[{ title: "Cart" }, { title: "Shipping" }, { title: "Payment" }]}
  current={1}
/>

Small (size='sm')

Account
Email & password
2
Profile
Name & avatar
3
Workspace
Team setup
4
Done
Review & finish

<Stepper steps={STEPS} current={1} size="sm" />

Props

Prop	Type	Default
steps*	Step[]	—
current*	number	—
orientation	"horizontal" \| "vertical"	—
size	StepSize	—
className	string	—

* required