Stepper

A React component in Beamline's Navigation category.

Where someone is in a multi-step flow: done steps carry a check, the current one a ring, and the line between marks fills as steps complete.

Use it for

Multi-step flows such as onboarding or checkout.
Stages of a record (deal stages) with onStepSelect.

Not for

Switching views (tabs).
Progress of a background job (progress).

Anatomy

list
mark (number / check; a done mark is an accent solid, the current one an accent ring, upcoming a hairline ring)
connector (between marks, never under them)
label
description (two lines at most)
narrow caption (n/total, current label and description)
status line

Variants

orientation: horizontal, vertical
details: all, current
compact: false, true

States

done
current
upcoming
complete
narrow horizontal (under ~480px, ~350px compact): marks only in the row, the current step said under it; names stay readable to screen readers

Keyboard

With onStepSelect each step is a button

Motion

The connector fills over --pui-duration-considered (360 ms) on the standard ease; marks change paint on the look's transition. Reduced motion: instant.

Props

Prop	Type	Default	Description
`steps`	`{ id, label, description? }[]`	—
`current`	`number (steps.length = complete)`	—
`onStepSelect`	`(index) => void`	—
`orientation / details / compact`	`string / string / boolean`	—
`completeLabel`	`string`	`"Complete"`
`style / ref`	`CSSProperties / native Ref`	—	native HTMLDivElement
`classNames`	`StepperClassNames`	—

Dependencies

lucide-react

Import

import { Stepper } from "@/components/stepper/stepper";

Get it

Stepper is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent