Components
Progress Tracker
Interactive progress tracker with step-by-step completion flow and animations
Configuring your account...
Please wait while we prepare everything for you
Click on steps to complete them
Usage
import ProgressTracker from './ProgressTracker';
const steps = [
{
id: 1,
title: 'Account Setup',
description: 'Create your account and verify email',
status: 'completed'
},
{
id: 2,
title: 'Profile Information',
description: 'Complete your profile details',
status: 'active'
}
];
<ProgressTracker steps={steps} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | Step[] | defaultSteps | Array of step objects |
className | string | '' | Additional CSS classes |
Step Object
| Property | Type | Description |
|---|---|---|
id | number | Unique identifier |
title | string | Step title |
description | string | Step description |
status | 'completed' | 'active' | 'pending' | 'error' | Current status |
Features
- Interactive step completion
- Progress bar with percentage
- Status indicators with icons
- Smooth animations
- Dark mode support
- Click to complete functionality