Stepper
Stepper Component
Playground
1
Account
Set up credentials
2
Profile
Add your details
3
Confirm
Review and submit
Props
| Prop | Type | Default | Value |
|---|---|---|---|
| activeStep | number | — | |
| orientation | selecthorizontal | vertical | — | |
| variant | selectdots | numbers | icons | — |
Default
1
Account
Set up credentials
2
Profile
Add your details
3
Confirm
Review and submit
Step2Active
Cart
Shipping
3
Payment
4
Confirm
LastStep
Account
Profile
3
Finish
Completed
Planning
Development
Review
WithError
Details
2
Upload
⚠️ Upload failed
3
Submit
Step 2 encountered an error — check the upload and retry.
Vertical
Select plan
Choose subscription tier
2
Billing
Enter payment details
3
Review
Confirm your order
WithDescriptions
Planning
Define requirements
Development
Write the code
3
Testing
Verify quality
4
Deployment
Ship to production
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
activeStep | number | — | Current active step (0-based) |
orientation | select | — | Layout direction |
variant | select | — | Indicator style |
Using Steppertsx
import { Stepper } from '@/components/Stepper'
<Stepper
activeStep="..."
orientation="..."
variant="..."
/>Tokens Used
No design tokens detected