Installation
Usage
import {
StepIndicator,
StepItem,
StepCircle,
StepConnector,
} from "@/components/ruixen/step-indicator";const steps = [1, 2, 3, 4, 5];
<StepIndicator defaultStep={3}>
{steps.map((step, index) => (
<StepItem key={step} step={step} className="flex-1">
<StepCircle />
{index < steps.length - 1 && <StepConnector />}
</StepItem>
))}
</StepIndicator>;Examples
Horizontal Layout
<StepIndicator defaultStep={3}>
{steps.map((step, index) => (
<StepItem key={step} step={step} className="flex-1">
<StepCircle />
{index < steps.length - 1 && <StepConnector />}
</StepItem>
))}
</StepIndicator>Vertical Layout
<StepIndicator defaultStep={2} orientation="vertical">
{steps.map((step, index) => (
<StepItem key={step} step={step}>
<StepCircle />
{index < steps.length - 1 && <StepConnector />}
</StepItem>
))}
</StepIndicator>Numbers Only (No Checkmarks)
<StepIndicator defaultStep={3}>
{steps.map((step, index) => (
<StepItem key={step} step={step} className="flex-1">
<StepCircle showCheck={false} />
{index < steps.length - 1 && <StepConnector />}
</StepItem>
))}
</StepIndicator>Props
StepIndicator
| Prop | Type | Default | Description |
|---|---|---|---|
defaultStep | number | 1 | Default active step |
currentStep | number | - | Controlled active step |
onStepChange | (step: number) => void | - | Callback when step changes |
orientation | "horizontal" | "vertical" | "horizontal" | Layout orientation |
StepItem
| Prop | Type | Default | Description |
|---|---|---|---|
step | number | Required | Step number |
completed | boolean | false | Force completed state |
disabled | boolean | false | Disable the step |
loading | boolean | false | Show loading spinner |
StepCircle
| Prop | Type | Default | Description |
|---|---|---|---|
showCheck | boolean | true | Show checkmark for completed steps |
StepConnector
Standard div props for styling the connector line.