StepIndicator

'use client'
import { useState } from 'react'

const STEPS = ['Account', 'Profile', 'Billing', 'Review']

export default function StepIndicator({ steps = STEPS }) {
  const [active, setActive] = useState(1)
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        {steps.map((step, i) => (
          <div key={step} style={{ display: 'flex', alignItems: 'center', flex: i < steps.length - 1 ? 1 : 'none' }}>
            <div
              onClick={() => setActive(i)}
              style={{
                width: '36px', height: '36px', borderRadius: '50%',
                background: i < active ? '#6d28d9' : i === active ? '#6d28d9' : '#e2e8f0',
                color: i <= active ? '#fff' : '#94a3b8',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 700, fontSize: '14px', cursor: 'pointer', flexShrink: 0,
                border: i === active ? '3px solid #ddd6fe' : 'none',
              }}
            >{i < active ? '✓' : i + 1}</div>
            {i < steps.length - 1 && (
              <div style={{
                flex: 1, height: '2px', margin: '0 6px',
                background: i < active ? '#6d28d9' : '#e2e8f0',
                transition: 'background 0.3s',
              }} />
            )}
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '8px' }}>
        {steps.map((step, i) => (
          <div key={step} style={{
            fontSize: '11px', fontWeight: i === active ? 700 : 400,
            color: i <= active ? '#6d28d9' : '#94a3b8', flex: 1, textAlign: 'center',
          }}>{step}</div>
        ))}
      </div>
      <div style={{ marginTop: '20px', display: 'flex', gap: '10px', justifyContent: 'center' }}>
        <button onClick={() => setActive(a => Math.max(0, a - 1))} disabled={active === 0}
          style={{ padding: '8px 20px', border: '1px solid #e2e8f0', borderRadius: '8px', background: '#fff', cursor: 'pointer' }}>Back</button>
        <button onClick={() => setActive(a => Math.min(steps.length - 1, a + 1))} disabled={active === steps.length - 1}
          style={{ padding: '8px 20px', border: 'none', borderRadius: '8px', background: '#6d28d9', color: '#fff', cursor: 'pointer', fontWeight: 600 }}>Next</button>
      </div>
    </div>
  )
}

Component info

About

Multi-step progress indicator with completed and active states