StepIndicator

Horizontal step progression with completed (green check), current (blue ring), and upcoming (gray) states with connector lines.

Navigation & Layoutstepswizardprogressindicator

Dependencies

shadcn/ui components needed:

npx shadcn@latest add badge

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Check } from 'lucide-react';
4import { Badge } from '@/components/ui/badge';
5
6export default function StepIndicator() {
7  const steps = [
8    { id: 1, label: 'Account', status: 'completed' },
9    { id: 2, label: 'Profile', status: 'completed' },
10    { id: 3, label: 'Preferences', status: 'current' },
11    { id: 4, label: 'Complete', status: 'upcoming' },
12  ];
13
14  return (
15    <div className="w-full max-w-2xl mx-auto p-8 bg-white dark:bg-slate-950 rounded-xl border border-slate-200 dark:border-slate-800">
16      <div className="flex items-center justify-between">
17        {steps.map((step, idx) => (
18          <div key={step.id} className="flex items-center flex-1">
19            <div className="flex flex-col items-center">
20              <div
21                className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all duration-300
22                  ${step.status === 'completed' 
23                    ? 'bg-emerald-500 border-emerald-500 text-white' 
24                    : step.status === 'current' 
25                      ? 'bg-blue-500 border-blue-500 text-white ring-4 ring-blue-500/20' 
26                      : 'bg-slate-100 dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-400'
27                  }`}
28              >
29                {step.status === 'completed' ? (
30                  <Check className="w-5 h-5" />
31                ) : (
32                  <span className="font-semibold text-sm">{step.id}</span>
33                )}
34              </div>
35              <span
36                className={`mt-2 text-sm font-medium transition-colors
37                  ${step.status === 'completed' 
38                    ? 'text-emerald-600 dark:text-emerald-400' 
39                    : step.status === 'current' 
40                      ? 'text-blue-600 dark:text-blue-400' 
41                      : 'text-slate-400'
42                  }`}
43              >
44                {step.label}
45              </span>
46            </div>
47            {idx < steps.length - 1 && (
48              <div
49                className={`flex-1 h-0.5 mx-4 transition-colors
50                  ${step.status === 'completed' ? 'bg-emerald-500' : 'bg-slate-200 dark:bg-slate-700'}
51                `}
52              />
53            )}
54          </div>
55        ))}
56      </div>
57      <div className="mt-8 p-6 rounded-lg bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800">
58        <p className="text-slate-600 dark:text-slate-400 text-center">
59          Step 3 of 4: Configure your preferences
60        </p>
61      </div>
62    </div>
63  );
64}