AG Design System

Component

Stepper

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

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/stepper

Usage

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

Playground

Preview

Configure

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

Variants & States

Supported variants, sizes, and interaction states for this component.

States

  • Not started
  • In progress
  • Completed

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