Stepper
Progress through a fixed sequence. One `current` index drives the common case; any step can override its own status for a failure or a skip in the middle.
src/components/ui/stepper.tsxAbout
From the component's own source, where it was written.
Progress through a fixed sequence of stages.
Status is derived from current unless a step overrides it, so the common case is one number rather than a status on every entry — but a failed or skipped step in the middle still has to be expressible, hence the override.
Horizontal stacks to vertical below the breakpoint. Four labelled stages across a phone leaves about seventy pixels each, which truncates every label to a word.
Install
npx astralyx-ui add stepper
Usage
import { Stepper } from '@/components/ui/stepper'
<Stepper steps={steps} current={2} />Composer
Change the props and the source below follows.
- InstallRestore dependencies
- BuildCompile and bundle
- In progressTest412 specs
- 4DeployShip to production
<Stepper
steps={steps}
current={2}
orientation="horizontal"
/>Examples
Pipeline stages
<Stepper steps={steps} current={2} />
<Stepper steps={steps} current={2} orientation="vertical" />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
Stepper
Progress through a fixed sequence of stages.
Extends Omit<ComponentProps<'ol'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | Step[] | required | { id, label, description?, status?, icon? }. A status overrides what current would imply. |
| current | number | 0 | Index of the active step. Everything before it reads as complete. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Axis. |
| responsive | Responsive | 'sm' | Breakpoint a horizontal stepper becomes a row at. Below it the stages stack — four labelled stages across a phone gives each about seventy pixels. |
Types
Step
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | ReactNode | — |
| description? | ReactNode | — |
| status? | StepStatus | Per-step override. Active shows a spinner, complete a tick, failed a cross, skipped a struck-through label. |
| icon? | ReactNode | — |
| Type | Definition | Description |
|---|---|---|
StepStatus | 'pending' | 'active' | 'complete' | 'failed' | 'skipped' | — |