Component

Stepper

Horizontal step progress indicator for multi-step flows. Completed steps show a checkmark.

Usage

Use steppers for linear multi-step processes like onboarding or checkout. Keep steps to 3–5.

Playground

Preview

Configure

Current Step

Progress state — not started, in progress, or fully completed.

Code

const steps = [
  { label: "Account", description: "Your details" },
  { label: "Profile", description: "Set up your profile" },
  { label: "Review", description: "Confirm & submit" }
]

<Stepper currentStep={1} steps={steps} />

Do

Label each step clearly with 1–2 words
Always show the user's current position and completed steps

Don't

Don't use more than 5 steps, break long flows into stages instead
Don't use a stepper for non-linear flows, use tabs instead