Steps

Navigation

Progress

Step-by-step progress indicators for wizards, onboarding, and multi-step forms.

Horizontal Steps

Classic horizontal progress indicator with step numbers and connecting lines

Vertical Steps

Vertical progress indicator for sidebar wizards

Props

Component API reference

Prop	Type	Default	Description
`steps*`	`Step[]`	—	Array of step objects
`current*`	`number`	—	Current active step (1-indexed)
`onChange`	`(step: number) => void`	—	Callback when step is clicked
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Step layout direction
`clickable`	`boolean`	`true`	Allow clicking to navigate steps
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation examples

import { useState } from 'react'
import { Check } from 'lucide-react'

const steps = [
  { id: 1, label: 'Account', description: 'Create your account' },
  { id: 2, label: 'Profile', description: 'Add your details' },
  { id: 3, label: 'Team', description: 'Invite team members' },
  { id: 4, label: 'Complete', description: 'Setup complete' },
]

function StepsDemo() {
  const [current, setCurrent] = useState(1)

  return (
    <ol className="flex items-center">
      {steps.map((step, index) => (
        <li key={step.id} className="flex items-center flex-1">
          <button onClick={() => setCurrent(step.id)} className="flex items-center gap-3">
            <div className={`w-10 h-10 flex items-center justify-center rounded-full ${
              step.id < current
                ? 'bg-indigo-500 text-white'
                : step.id === current
                ? 'bg-indigo-500 text-white ring-4 ring-indigo-100'
                : 'bg-slate-100 text-slate-400'
            }`}>
              {step.id < current ? <Check className="w-5 h-5" /> : step.id}
            </div>
            <div>
              <p className="text-sm font-medium">{step.label}</p>
              <p className="text-xs text-slate-400">{step.description}</p>
            </div>
          </button>
          {index < steps.length - 1 && (
            <div className={`flex-1 mx-4 h-1 rounded-full ${
              step.id < current ? 'bg-indigo-500' : 'bg-slate-200'
            }`} />
          )}
        </li>
      ))}
    </ol>
  )
}

Features

Built-in functionality

Check marks: Completed steps show check mark icon
Active ring: Current step highlighted with focus ring
Clickable steps: Allow navigation between steps
Horizontal layout: Classic horizontal progress indicator
Vertical layout: Sidebar-friendly vertical orientation
Connecting lines: Visual connection between steps
Descriptions: Optional description for each step
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses ol/li elements for semantic structurearia-current="step" for active steparia-label for step navigationButtons are properly labeled

Keyboard Navigation

Key	Action
`Tab`	Navigate between step buttons
`Enter/Space`	Activate step

Notes

Screen reader announces step number and status
Completed steps announced as "completed"
Focus visible on all interactive steps

Related Components

Progress Tabs Breadcrumbs