Steps
Navigation
Workflow
Multi-step progress indicators for wizards, onboarding flows, and sequential processes.
Preview
Interactive step indicator with navigation
Account
2
Profile
3
Preferences
4
Complete
Compact Variant
Minimal steps without descriptions
3
4
5
Vertical Steps
Vertical layout for sidebar or narrow containers
Account
Create your account
Profile
Set up your profile
3
Preferences
Configure settings
4
Complete
Review and finish
Props
Steps component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
steps* | StepItem[] | — | Array of step items with label and description |
current* | number | — | Current active step index (0-based) |
onChange | (step: number) => void | — | Step change handler |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout orientation |
size | 'sm' | 'md' | 'md' | Step indicator size |
className | string | — | Additional CSS classes |
Usage
Import and implementation example
import { Steps } from '@/components/ui/steps'
const steps = [ { label: 'Account', description: 'Create your account' }, { label: 'Profile', description: 'Set up your profile' }, { label: 'Complete', description: 'Review and finish' },]
const [current, setCurrent] = useState(0)
<Steps steps={steps} current={current} onChange={setCurrent} orientation="horizontal"/>Features
Built-in functionality
- Two orientations: Horizontal and vertical layouts
- Step states: Completed, current, and pending states
- Check icons: Completed steps show check marks
- Active ring: Current step has ring highlight
- Connecting lines: Progress lines between steps
- Dark mode: Full dark mode support
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
aria-current="step" on active steprole="list" for step sequenceStep completion announced to screen readersKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between steps (if clickable) |
| Enter / Space | Activate step |
Notes
- Step numbers provide fallback for color-only states
- Descriptions give context for each step
- Progress is communicated semantically