Navigation

Stepper

Progress indicator for multi-step flows: completed, active and upcoming steps with optional descriptions, error states and clickable steps.

Import

import { Stepper } from "@zephora/react";

Examples

With controls

Drive `activeStep` from your own state.

Cart
Shipping
Payment
Done

const [active, setActive] = React.useState(1);

<Stepper
  activeStep={active}
  steps={[
    { title: "Cart" },
    { title: "Shipping" },
    { title: "Payment" },
    { title: "Done" },
  ]}
/>
<Button size="sm" variant="outline" onClick={() => setActive((s) => Math.max(0, s - 1))}>
  Back
</Button>
<Button size="sm" onClick={() => setActive((s) => Math.min(3, s + 1))}>
  Next
</Button>

Vertical with error

Steps take descriptions; `error` flags a failed step.

Create accountEmail verified
BillingCard declined
WorkspacePick a name

<Stepper
  orientation="vertical"
  activeStep={2}
  steps={[
    { title: "Create account", description: "Email verified" },
    { title: "Billing", description: "Card declined", error: true },
    { title: "Workspace", description: "Pick a name" },
  ]}
/>

Clickable

`clickable` renders steps as buttons that fire `onStepChange`.

const [active, setActive] = React.useState(0);

<Stepper
  clickable
  activeStep={active}
  onStepChange={setActive}
  steps={[{ title: "Details" }, { title: "Review" }, { title: "Submit" }]}
/>

API

Stepper props

Prop	Type	Default	Description
`steps` *	`Array<{ title: ReactNode; description?: ReactNode; icon?: ReactNode; error?: boolean }>`	—	Ordered list of steps.
`activeStep` *	`number`	—	Index of the current step (0-based).
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction.
`clickable`	`boolean`	`false`	Render steps as buttons that fire onStepChange.
`onStepChange`	`(index: number) => void`	—	Called with the clicked step index (requires clickable).
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Indicator/typography scale.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.