Stepper
Renders a stepped progress indicator with icon circles, labels, separators, and completed/active/inactive states. All steps before active are marked completed with a checkmark.
Horizontal (default)
Create account
Enter your email and password
Verify email
Check your inbox for a link
Set up profile
Add your name and avatar
Done
You are all set!
<Stepper
active={1}
steps={[
{ label: 'Create account', description: 'Enter your email and password' },
{ label: 'Verify email', description: 'Check your inbox' },
{ label: 'Set up profile', description: 'Add your name and avatar' },
{ label: 'Done', description: 'You are all set!' },
]}
/>Different active steps
Create account
Enter your email and password
Verify email
Check your inbox for a link
Set up profile
Add your name and avatar
Done
You are all set!
Create account
Enter your email and password
Verify email
Check your inbox for a link
Set up profile
Add your name and avatar
Done
You are all set!
Create account
Enter your email and password
Verify email
Check your inbox for a link
Set up profile
Add your name and avatar
Done
You are all set!
<Stepper active={0} steps={steps} />
<Stepper active={2} steps={steps} />
<Stepper active={4} steps={steps} />Vertical
Create account
Enter your email and password
Verify email
Check your inbox for a link
Set up profile
Add your name and avatar
Done
You are all set!
<Stepper active={1} steps={steps} orientation="vertical" />With color
Create account
Enter your email and password
Verify email
Check your inbox for a link
Set up profile
Add your name and avatar
Done
You are all set!
<Stepper active={2} steps={steps} color="violet" />Custom icons
Cart
Shipping
Payment
Confirm
<Stepper
active={1}
steps={[
{ label: 'Cart', icon: '🛒' },
{ label: 'Shipping', icon: '📦' },
{ label: 'Payment', icon: '💳' },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
active | number | — | 0-based index of the currently active step (required) |
steps | StepDef[] | — | Ordered list of step definitions (required) |
orientation | 'horizontal'|'vertical' | 'horizontal' | Direction of the stepper layout |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Font size and icon size |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border radius of each step's icon circle |
color | string | — | Default accent color for all step icons |
iconPosition | 'left'|'right' | 'left' | Side where the icon circle is placed |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |