Stepper
A multi-step progress indicator with striped fill bar and star icons.
Mission Status: Phase 2 of 4
2
3
4
ENLIST
TRAIN
DEPLOY
LIBERATE
Installation
pnpm dlx shadcn@latest add https://propcore.dev/r/stepper.jsonUsage
import { Stepper } from "@/components/ui/stepper"const steps = ["ENLIST", "TRAIN", "DEPLOY", "LIBERATE"]
<Stepper steps={steps} currentStep={1} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | string[] | required | Array of step labels |
currentStep | number | required | Zero-indexed current step |
className | string | - | Additional CSS classes |
Features
- Progress bar with striped fill animation
- Step markers showing numbers or stars for completed steps
- Color coding: Red for current, gold for completed, muted for pending
- Mission status header with star icon