Multi-step progress as an ordered list: a numbered marker per step, a title and an optional description, laid out as a row or a column. As `current` advances, the line between the markers fills segment by segment on a spring and each finished number turns into a check that draws itself in; stepping back empties it the other way. Steps can also be marked as needing attention or skipped. Completed steps (or every step) can be made pressable to jump back, the current one carries `aria-current="step"`, and every state is spelled out for screen readers.
The import and the props worth knowing about, in one place.
import { StepsTrack } from "@/components/beste/component/steps-track";
<StepsTrack
steps={[
{ title: "Upload stems", description: "WAV or AIFF" },
{ title: "Set the mix" },
{ title: "Master" },
{ title: "Release" },
]}
current={1}
/>
<StepsTrack
steps={steps}
current={step}
orientation="vertical" // a column with the text beside each marker
onStepClick={(index) => setStep(index)}
clickable="completed" // "completed" | "all" | "none"
tone="outline" // "muted" | "outline" | "ghost"
size="lg" // "sm" | "default" | "lg"
/>
// Per-step overrides
<StepsTrack steps={[{ title: "Payment", status: "error" }, { title: "Survey", status: "skipped" }]} current={2} />Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Tab | Reach each pressable step in order; the others are plain text. |
|---|---|
| Enter / Space | Jump to the focused step through `onStepClick`. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
steps* | Step[] | — | |
current* | number | — | Index of the step in progress. `steps.length` marks every step complete. |
orientation | "horizontal" | "vertical" | "horizontal" | Row of steps, or a column with the text beside each marker. |
onStepClick | (index: number) => void | — | Makes steps pressable. Which ones is set by `clickable`. |
clickable | "completed" | "all" | "none" | "completed" | Which steps answer `onStepClick`: the ones already done, every one, or none. |
tone | "muted" | "outline" | "ghost" | "ghost" | |
size | "sm" | "default" | "lg" | "default" | |
className | string | — | |
aria-label | string | — | Accessible name for the list. |
5 of 52 of 5 done
Five steps before the autumn tour goes on sale.
Photos, a short bio and the lineup.
A preview player goes on the home page.
Twelve shows so far, from Lisbon to Oslo.
Connect payments and list the first shirts.
Fans get a note at hello@beste.co when tickets drop.
2 of 5 done