Step IndicatorPro
Pro
Step indicators show progress through a multi-step workflow. Available in horizontal and vertical layouts, with text or icon indicators.
Horizontal Step Indicator Playground
Horizontal Step Indicator Playground
Preview
Code
Account
Create your account
02
Shipping
Enter address
03
Payment
Choose payment
04
Confirm
Review order
Controls
Step (2):
Indicator:
Text
Icon
Supporting Text:
Vertical Step Indicator Playground
Vertical Step Indicator Playground
Preview
Code
Account
Create your account
02
Shipping
Enter address
03
Payment
Choose payment
04
Confirm
Review order
Controls
Step (2):
Indicator:
Text
Icon
Supporting Text:
Installation
You can add the step indicator component to your project manually:
1
Install the following dependencies:
npm
pnpm
yarn
bun
npm install @phosphor-icons/react2
Copy and paste the following code into your project.
Loading...
3
Update the import paths to match your project setup.
Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.
Basic Usage
import { HorizontalStepper, VerticalStepper } from '@versaui/ui/components/StepIndicator';
const steps = [
{ title: 'Account', supportingText: 'Create your account' },
{ title: 'Profile', supportingText: 'Add your details' },
{ title: 'Review', supportingText: 'Review and submit' },
];
<HorizontalStepper steps={steps} currentStep={2} />Vertical Layout
<VerticalStepper steps={steps} currentStep={2} />Icon Indicators
Use icons instead of step numbers:
import { UserIcon, GearIcon, CheckCircleIcon } from '@phosphor-icons/react';
const steps = [
{ title: 'Account', supportingText: 'Create your account', icon: <UserIcon /> },
{ title: 'Settings', supportingText: 'Configure preferences', icon: <GearIcon /> },
{ title: 'Done', supportingText: 'All set', icon: <CheckCircleIcon /> },
];
<HorizontalStepper steps={steps} currentStep={2} indicatorType="icon" />Without Supporting Text
<HorizontalStepper
steps={steps}
currentStep={2}
showSupportingText={false}
/>Step Interface
interface Step {
title: string; // Step title (required)
supportingText?: string; // Optional description
icon?: ReactNode; // Optional icon for icon indicator type
}Accessibility
- Uses
aria-current="step"on the active step - Step status (completed, current, upcoming) announced to screen readers
- Proper semantic list structure for step sequence
- Completed steps use a check icon for visual confirmation
Stepper Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | Step[] | — | Array of step objects (required). |
currentStep | number | 1 | Current active step (1-indexed). |
indicatorType | 'text' | 'icon' | 'text' | Show numbers or icons in the step indicator. |
showSupportingText | boolean | true | Show the supporting text below each step title. |
className | string | '' | Additional CSS classes. |