Loading page…
Loading page…
Progress through a multi-step flow. Numbered discs derive their status from current — complete steps seal in aurum with a check, the current step rings and pulses, upcoming steps stay muted. The connector between them fills gold as each step completes, animating on the glide spring (instant under reduced motion). Pass statuses to override a step, e.g. to raise an error.
The default layout. As current advances the completed discs seal and the connector fill grows left-to-right toward the active step — a gold trail of progress.
<Stepper steps={steps} current={0} />--ch-accent--ch-surface--ch-border--ch-fg-faintFirst step active; every connector empty.
<Stepper steps={steps} current={2} />--ch-accent--ch-accent-fg--ch-border--ch-fgTwo steps sealed; the fill reaches the active third disc.
<Stepper steps={steps} current={4} />--ch-accent--ch-accent-fg--ch-fg-mutedAll but the last complete; the last disc rings, awaiting broadcast.
orientation="vertical" stacks the steps with the connector running down the disc rail. Descriptions sit beside each label — the register for wizards and settings flows.
<Stepper steps={steps} current={1} orientation="vertical" />--ch-accent--ch-surface--ch-border--ch-fg-mutedRecipient sealed; Amount active and pulsing.
<Stepper steps={steps} current={3} orientation="vertical" />--ch-accent--ch-accent-fg--ch-border--ch-fgThree steps sealed; the rail fills down to Review.
A statuses entry overrides the derived status for one step. Marking a step error paints its disc danger with an alert glyph and turns its label red, while the surrounding steps keep their current-derived status — the connector into an errored step stays unfilled until it is resolved.
<Stepper steps={steps} current={2} statuses={{ fee: "error" }} />--ch-danger--ch-danger-muted--ch-accent--ch-bordercurrent=2, but the fee step is forced to error (e.g. rate estimation failed).
<Stepper steps={steps} current={2} orientation="vertical" statuses={{ verify: "error" }} />--ch-danger--ch-danger-muted--ch-accentThe override travels across layouts unchanged.
sm rides inline chrome and tight panels; md is the working default for full-page flows. Disc, numerals, labels, and connector offset all scale together.
<Stepper steps={steps} current={2} size="sm" />--ch-accent--ch-font-size-xs--ch-borderCompact discs and 11px labels.
<Stepper steps={steps} current={2} size="md" />--ch-accent--ch-font-size-sm--ch-borderDefault — larger discs and sm labels.
A vertical stepper mid-flow under dark, light, and Harbor Mode — the aurum fill and the sealed discs hold their treasury register on every layer.
<Stepper steps={steps} current={2} orientation="vertical" size="sm" />--ch-accent--ch-accent-fg--ch-border--ch-fg