Steps
Stepped progress indicator showing a sequence of numbered stages with completion states.
Examples
Basic
Three-step progress indicator in its initial state.
With active step
Step 2 is the active step; step 1 is completed.
Completed
All three steps show as completed.
Vertical
Steps laid out vertically for taller workflows.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Steps } from "@rokle/components";import { Steps } from "@rokle/components";
export function Example() {
return <Steps />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { label: string; description?: string }[] | - | Ordered list of step definitions. |
| currentStep | number | - | Zero-based index of the active step. |