Stepper
Steppers guide users through multi-step processes and clearly indicate progress.
Import
import { Stepper } from "@shivms/ui";Orientation
Horizontal
✓
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Vertical
✓
Account
Create your account
✓
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Sizes
Small
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Medium
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Large
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Colors
Primary
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Secondary
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Success
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Warning
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Danger
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Info
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Active Step
Step 1
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Step 2
✓
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Step 3
✓
Account
Create your account
✓
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Step 4
✓
Account
Create your account
✓
Profile
Complete your profile
✓
Payment
Add payment method
4
Finish
Complete setup
States
Default
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup
Disabled
1
Account
Create your account
2
Profile
Complete your profile
3
Payment
Add payment method
4
Finish
Complete setup