Step 1
2
Step 2
3
Step 3
Stepper Component
A stepper component that guides users through a multi-step process or workflow.
- Horizontal and vertical orientation options
- Animated transitions between steps
- Interactive state management
- Visual indicators for completed, current, and upcoming steps
Installation
The Stepper component is part of our UI library. You can import it directly from the components directory.
Usage
Here is how to use the stepper in your project.
React TSX
Examples
Horizontal Stepper (Default)
A standard horizontal stepper with basic styling.
Account Details
2
Personal Information
3
Review & Submit
Vertical Stepper
A stepper with vertical orientation for longer processes.
Account Details
2
Personal Information
3
Review & Submit
Interactive Stepper
A stepper with navigation controls for user interaction.
Account Details
2
Personal Information
3
Review & Submit
Stepper with Content
A vertical stepper with content for each step.
1
Account Details
Create your account
Enter your email and password to create your account.
2
Personal Information
Your personal details
Provide your personal details to complete your profile.
3
Review & Submit
Confirm submission
Review all your information before submitting.
API Reference
Stepper Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | StepperStep[] | - | Array of step objects |
activeStep | number | - | Index of the current active step |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientation of the stepper |
lineLast | boolean | false | Whether to display a line after the last step |
className | string | - | Additional CSS classes to apply to the stepper |
StepperStep Props
| Prop | Type | Description |
|---|---|---|
id | string | number | Unique identifier for the step |
title | string | Title or label of the step |
children | React.FC | () => JSX.Element | Optional content component to render for this step |
Styling
The Stepper component applies different styles based on the state of each step:
- Active Step: Highlighted with primary color
- Completed Steps: Marked with a check icon
- Upcoming Steps: Displayed with muted styling
- Connecting Lines: Animated to show progress between steps
Animation
The component uses Framer Motion to provide smooth transitions:
- Animated progress indicator between steps
- Scale animations for step circles
- Transition effects when steps change
- Smooth check mark appearance for completed steps