Build · New

Progress Steps

Shows where people are in a multi-step flow such as opening an account: a check on done steps, the brand color on the current one, grey for the rest.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/progress-steps

Dependencies it brings: @phosphor-icons/react

Usage

import { ProgressStep, ProgressSteps } from "@/components/ui/progress-steps";

<ProgressSteps current={2} aria-label="Account opening">
  <ProgressStep href="/open/details">Personal details</ProgressStep>
  <ProgressStep>Verify ID</ProgressStep>
  <ProgressStep>Address</ProgressStep>
</ProgressSteps>

Examples

Minimal

Dots on a line with the labels above, up to six steps.

Icons

An icon in each circle; done steps still show the check.

Vertical

For phones and side panels.

API reference

ProgressSteps

Prop	Type	Default	Description
`current`	`number`		Figma's Current step: the current step, from 1; earlier steps are done.
`variant`	`"numbers" \| "minimal" \| "icons"`	`"numbers"`	Figma's three sets.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Figma's Direction.
`numerals`	`"latn" \| "arab"`	`"latn"`	Numeral system for the step numbers.
`aria-label`	`string`		The flow's name for screen readers ("Account opening").

ProgressStep

Prop	Type	Description
`children`	`ReactNode`	Figma's Label: what people do in the step.
`icon`	`IconComponent`	The circle's icon in the Icons style.
`href`	`string`	A link back to a done step, to change it.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Reaches the links of done steps only; the other steps aren't interactive.

ARIA

An ordered ol named by the flow; the current step has aria-current="step".
Each step says its state in the page language: "step 2 of 4, current", not by color alone.
Don't mark a step done before its data is saved.

Arabic and RTL notes

Mirrors

The flow starts on the right, and the lines run to the left.
Vertical steps put the circles on the right with the labels to their left.

Does not mirror

The check and the step icons.

Numerals: Step numbers and the state text use the chosen numerals (1 2 3 or ١ ٢ ٣).
Arabic typography: body-14 for the labels, label-16 Medium for the numbers.
Mixed-direction text: Labels don't wrap in horizontal steps; keep them short.

All components ›