Steps

Pro

Wizard step indicator where finishing a step closes its ring, draws a check and fills the line to the next marker. Also comes as compact page dots.

Preview

Installation

npx @lumioui/cli add pro/steps

Usage

import { Steps } from "@/components/ui/steps/steps";
<Steps />

Examples

Dots

Page-control dots on a wellbeing app's welcome: a stage lit from above where the calm character brightens page by page, the title and body switch on in 120ms bands, and the current pill stretches like a light between dots.

Numbered

A business-account application: Continue completes the step in place (ring closes, check draws, a light head carries the connector to the next marker) and the next page's copy switches on in 120ms bands; tapping an earlier step goes back to it.

API reference

Prop Type Default
steps* string[] | StepsItem[]

Steps to display — strings or { label } objects.

 —
current number

Controlled current index (0-based).

 —
defaultCurrent number

Uncontrolled starting index. Default 0.

 0
onCurrentChange (index: number) => void

Fired when a step is tapped (controlled or uncontrolled).

 —
variant "numbered" | "dots"

"numbered" = numbered circles with a check on done; "dots" = compact dots.

 "numbered"
labels boolean

Labels under the markers. Default true for "numbered", false for "dots".

 —
interactive boolean

Tappable steps. Default true.

 true
haptic "selection" | "light" | false

Haptic on step change. Default "selection".

 "selection"
className string —