Navigation
Stepper
Segmented progress for multi-step flows: a bar and numbered label per step, filled up to the current step.
- Source
- src/components/ui/stepper.tsx
- Figma
- Step · state (complete, current, upcoming).
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Stepper } from "@/components/ui/stepper";When to use
- Onboarding, checkout and setup wizards with three to five ordered steps.
- When people benefit from knowing how many steps are left.
- For views people can visit in any order, use Tabs.
- For a single task's progress, like an upload, use Progress.
Examples
Step states
Steps before current are complete, current is bold, the rest are upcoming. Pass steps.length to mark every step complete.
In a setup wizard
A card with the stepper, the current step's fields and the navigation. The heading repeats the step for screen readers.
API reference
Stepper
Display only: it does not handle clicks or hold state. Drive current from your own Back and Next buttons. Does not spread other HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | string[] | - | Step labels, in order. Shown as "1. Label". Labels are used as React keys, so keep them unique. |
| current | number | - | Index of the current step, starting at 0. Earlier steps read as complete. Pass steps.length to show every step complete. |
| className | string | - | Extra classes for the list. |
Accessibility
- Renders an ordered list, and each label includes its step number, so screen readers announce the order.
- The current step is marked visually only (bold label); there is no aria-current. Repeat it in text, for example a heading like "Step 2 of 4: Workspace", so it is announced.
- The bars are decorative spans with no text. Labels also change weight and color, so the bar color is not the only signal.