Installation
Usage
import { ProgressTracker } from "@/components/ruixen/progress-tracker";<ProgressTracker
totalSteps={5}
currentStep={3}
onStepChange={setStep}
variant="segments"
/>Examples
Segmented Progress
<ProgressTracker totalSteps={5} currentStep={3} variant="segments" />Continuous Bar
<ProgressTracker totalSteps={6} currentStep={2} variant="bar" />Dot Indicators
<ProgressTracker totalSteps={7} currentStep={4} variant="dots" />Label Position
// Label on top
<ProgressTracker
totalSteps={4}
currentStep={2}
labelPosition="top"
/>
// Label on bottom (default)
<ProgressTracker
totalSteps={4}
currentStep={2}
labelPosition="bottom"
/>
// Without label
<ProgressTracker
totalSteps={5}
currentStep={3}
showLabel={false}
/>Props
ProgressTracker
| Prop | Type | Default | Description |
|---|---|---|---|
totalSteps | number | Required | Total number of steps |
defaultStep | number | 1 | Default active step |
currentStep | number | - | Controlled active step |
onStepChange | (step: number) => void | - | Callback when step changes |
showLabel | boolean | true | Show "Step X of Y" label |
labelPosition | "top" | "bottom" | "bottom" | Label position |
variant | "bar" | "segments" | "dots" | "segments" | Visual style variant |