Progress Steps
Vertical step indicator and horizontal dot stepper. Three step types (check, number, featured-icon), two sizes, and interactive navigation.
{ ProgressSteps, ProgressDots } from "@pepulux/ui"Check type — default
Completed steps get a brand-filled checkmark circle. Current step has a brand ring.
Create account
Enter your account details
Set up profile
Add your profile info
Add payment
Connect a payment method
Confirmation
Review and confirm
Number type
Incomplete steps show their ordinal number. Complete steps show a green check.
Application details
Enter your personal details
Upload documents
Upload required documents
Review and submit
Review before submitting
Featured-icon type
Each step gets a custom icon in a skeuomorphic box. Incomplete steps are dimmed.
Personal information
Fill in your basic details
Billing information
Link your payment method
All done!
Your account is created
Size — sm / md
sm is the default (compact). md increases icon and text size.
size=sm (default)
Application details
Enter your personal details
Upload documents
Upload required documents
Review and submit
Review before submitting
size=md
Application details
Enter your personal details
Upload documents
Upload required documents
Review and submit
Review before submitting
Interactive — clickable navigation
Drive step status from state. Back/Next buttons advance or retreat current step.
Account
Profile
Payment
Confirm
ProgressDots — horizontal stepper
Compact inline stepper showing step count and mini step icons. Good for wizard headers.
type=number, showLabel=true
type=check, showLabel=false
ProgressDots — interactive
Wire up state to advance or retreat the current step indicator.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* | Step[] | — | Array of step objects (see Step interface below) |
| type | "check" | "number" | "featured-icon" | "check" | Icon style for each step indicator |
| size | "sm" | "md" | "sm" | Overall size of icons and text |
| className | string | — | Additional CSS classes on the wrapper |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id* | string | — | Unique key for the step |
| label* | string | — | Step title |
| description | string | — | Supporting text below the label |
| icon | ReactNode | — | Icon for featured-icon type steps |
| status | "complete" | "current" | "incomplete" | "incomplete" | Visual state of the step |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| totalSteps* | number | — | Total number of steps |
| currentStep* | number | — | 1-based index of the active step |
| type | "check" | "number" | "check" | Icon style for completed/active steps |
| size | "sm" | "md" | "sm" | Icon size |
| showLabel | boolean | true | Show 'Step N of M' label on the left |
| className | string | — | Additional CSS classes |