ComponentsNavigationStepper

Stepper

10 variants · horizontal · vertical · icon · timeline · checklist · progress bar · error state

DefaultVerticalPillDotBadgeGradientIconCardProgress barTimelineChecklistError state

Default — horizontal

Live preview

Numbered circles with label and sublabel — steps before current are marked complete

Account setupStep 1

Email verifiedStep 2

Profile detailsStep 3

Payment methodStep 4

ConfirmationStep 5

Step 3 / 5

App.tsx

tsx

1import { Stepper, type StepItem } from 'omverse-ui'
2 
3const steps: StepItem[] = [
4  { label: 'Account setup',   sublabel: 'Step 1', description: 'Create your account.' },
5  { label: 'Email verified',  sublabel: 'Step 2', description: 'Verify your email.'   },
6  { label: 'Profile details', sublabel: 'Step 3', description: 'Fill in your profile.'},
7  { label: 'Payment method',  sublabel: 'Step 4', description: 'Add payment method.'  },
8  { label: 'Confirmation',    sublabel: 'Step 5', description: 'Review and confirm.'  },
9]
10 
11<Stepper steps={steps} activeStep={step} />
12 
13<div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
14  <Button onClick={() => setStep(s => Math.max(0, s - 1))}>Prev</Button>
15  <Button onClick={() => setStep(s => Math.min(steps.length - 1, s + 1))}>Next</Button>
16</div>

Default — vertical

Live preview

Vertical orientation with connecting line between steps

Account setupStep 1

Create your account and choose a username.

Email verifiedStep 2

Verify your email address to continue.

Profile detailsStep 3

Fill in your profile information.

Step 3 / 3

App.tsx

tsx

1<Stepper steps={steps.slice(0, 3)} activeStep={step} orientation="vertical" />

Pill

Live preview

Pill-shaped step indicators

Step 3 / 5

App.tsx

tsx

1<Stepper steps={steps} activeStep={step} variant="pill" />

Dot

Live preview

Minimal dot indicators — great for compact progress

Account setup

Email verified

Profile details

Payment method

Confirmation

Step 3 / 5

App.tsx

tsx

1<Stepper steps={steps} activeStep={step} variant="dot" />

Badge

Live preview

Numbered badge indicators with label

Account setupStep 1

Email verifiedStep 2

Profile detailsStep 3

Payment methodStep 4

Step 3 / 4

App.tsx

tsx

1<Stepper steps={steps.slice(0, 4)} activeStep={step} variant="badge" />

Gradient

Live preview

Gradient fill on active and completed steps

Account setup

Email verified

Profile details

Payment method

Step 3 / 4

App.tsx

tsx

1<Stepper steps={steps.slice(0, 4)} activeStep={step} variant="gradient" />

Icon

Live preview

Custom icon inside each step indicator

Verify

Customize

Launch

Step 3 / 4

App.tsx

tsx

1const iconSteps: StepItem[] = [
2  { label: 'Sign up',   icon: 'user'     },
3  { label: 'Verify',    icon: 'mail'     },
4  { label: 'Customize', icon: 'settings' },
5  { label: 'Launch',    icon: 'rocket'   },
6]
7 
8<Stepper steps={iconSteps} activeStep={step} variant="icon" />

Card

Live preview

Each step rendered as a bordered card

Step 3 / 4

App.tsx

tsx

1<Stepper steps={steps.slice(0, 4)} activeStep={step} variant="card" />

Progress bar

Live preview

showProgressBar renders a bar below the step indicators

Account setup

Email verified

Profile details

Payment method

Confirmation

Step 3 / 5

App.tsx

tsx

1<Stepper steps={steps} activeStep={step} variant="progress-bar" showProgressBar />

Timeline — vertical

Live preview

Rich vertical timeline with dates and content inside each step

Project kickoffDone

Design phaseDone

DevelopmentCurrent

Core features implemented and integrated with the backend API.

Step 3 / 3

App.tsx

tsx

1const timelineSteps: StepItem[] = [
{
  label: 'Project kickoff',
  sublabel: 'Jan 10, 2025',
  content: <p>Initial meeting. Scope and milestones defined.</p>,
},
{
  label: 'Design phase',
  sublabel: 'Feb 3, 2025',
  content: <p>Wireframes and prototypes approved.</p>,
},
{
  label: 'Development',
  sublabel: 'Mar 15, 2025',
  content: <p>Core features implemented.</p>,
},
17]
18 
19<Stepper steps={timelineSteps} activeStep={step} variant="timeline" orientation="vertical" />

Checklist style

Live preview

Task-list style vertical stepper — supports optional steps

Step 3 / 5

App.tsx

tsx

1const checklistSteps: StepItem[] = [
2  { label: 'Install dependencies'  },
3  { label: 'Configure environment' },
4  { label: 'Set up database'       },
5  { label: 'Run migrations', optional: true },
6  { label: 'Deploy to production'  },
7]
8 
9<Stepper steps={checklistSteps} activeStep={step} variant="checklist" orientation="vertical" />

With error state

Live preview

Use explicit status props to show complete, error, and pending states

Account

Verify

Profile

Payment

App.tsx

tsx

1const steps: StepItem[] = [
2  { label: 'Account', status: 'complete' },
3  { label: 'Verify',  status: 'error'    },
4  { label: 'Profile', status: 'pending'  },
5  { label: 'Payment', status: 'pending'  },
6]
7 
8<Stepper steps={steps} currentStep={1} />

Stepper props

Props

PropTypeDefaultDescription

stepsStepItem[][]Array of step definitions

activeStepnumber0Index of the currently active step (0-based)

orientation'horizontal' | 'vertical''horizontal'Direction of the stepper

color'default' | 'success' | 'secondary''default'Color scheme for active/completed steps

clickablebooleanfalseAllow clicking completed steps to go back

StepItem shape

Props

PropTypeDefaultDescription

idstring—Unique identifier for the step (required)

labelstring—Step label shown below/beside the indicator

sublabelstring—Smaller secondary label

descriptionstring—Longer description text

iconIconName—Icon name for the step indicator (icon variant)

status'done' | 'active' | 'error' | 'pending'—Explicit step status override

optionalbooleanfalseShows an optional badge on the step

contentReactNode—Content shown inside the step (timeline variant)