divstepperintermediate

Horizontal Stepper

A horizontal step indicator with numbered circles, connecting lines, and completed/active states.

Preview

Account

2

Profile

3

Settings

4

Review

<div class="max-w-lg mx-auto">
  <div class="flex items-center">
    <div class="flex flex-col items-center">
      <div class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-sm">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
      </div>
      <p class="text-xs font-medium text-blue-600 mt-2">Account</p>
    </div>
    <div class="flex-1 h-0.5 bg-blue-600 mx-2"></div>
    <div class="flex flex-col items-center">
      <div class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-sm">2</div>
      <p class="text-xs font-medium text-blue-600 mt-2">Profile</p>
    </div>
    <div class="flex-1 h-0.5 bg-gray-300 mx-2"></div>
    <div class="flex flex-col items-center">
      <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center font-bold text-sm">3</div>
      <p class="text-xs font-medium text-gray-500 mt-2">Settings</p>
    </div>
    <div class="flex-1 h-0.5 bg-gray-300 mx-2"></div>
    <div class="flex flex-col items-center">
      <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center font-bold text-sm">4</div>
      <p class="text-xs font-medium text-gray-500 mt-2">Review</p>
    </div>
  </div>
</div>

Color Breakdown

Active Circle

bg-blue-600

#2563eb

Active Text

text-white

#ffffff

Active Label

text-blue-600

#2563eb

Inactive Circle

bg-gray-200

#e5e7eb

Inactive Text

text-gray-500

#6b7280

Complete Line

bg-blue-600

#2563eb

Incomplete Line

bg-gray-300

#d1d5db

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-blue-500 dark:bg-gray-700 dark:text-gray-400 dark:bg-gray-600

Use Cases

Multi-step formsCheckout processesOnboarding wizards

Browser Support

All modern browsers.

Related Recipes

Tab Navigation

nav - beginner

Progress Badge

span - beginner

Success Alert

div - beginner

Error Alert

div - beginner

Warning Alert

div - beginner

Info Toast

div - intermediate

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I update the stepper state dynamically?▼
Use JavaScript to swap bg-gray-200 text-gray-500 classes with bg-blue-600 text-white on step circles and change line colors from bg-gray-300 to bg-blue-600 as users progress.