Progress Steps

Multi-step progress indicator with horizontal/vertical layouts, sizes, dots, bar, and clickable variants.

Horizontal Steps

Preview

Account

Create your account

Profile

Add your details

Review

Confirm everything

<div class="progress-steps progress-steps-horizontal">
  <div class="progress-steps-step progress-steps-step-completed">
    <div class="progress-steps-indicator">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    </div>
    <div class="progress-steps-content">
      <p class="progress-steps-title">Account</p>
      <p class="progress-steps-description">Create your account</p>
    </div>
  </div>
  <div class="progress-steps-step progress-steps-step-active">
    <div class="progress-steps-indicator"><span>2</span></div>
    <div class="progress-steps-content">
      <p class="progress-steps-title">Profile</p>
      <p class="progress-steps-description">Add your details</p>
    </div>
  </div>
  <div class="progress-steps-step">
    <div class="progress-steps-indicator"><span>3</span></div>
    <div class="progress-steps-content">
      <p class="progress-steps-title">Review</p>
      <p class="progress-steps-description">Confirm everything</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-row items-start">
  <!-- Step 1: completed -->
  <div class="flex-1 flex flex-col items-center relative">
    <div class="size-8 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm font-semibold z-1">
      <svg class="size-4" ...>✓</svg>
    </div>
    <div class="mt-2 text-center">
      <p class="text-sm font-medium">Account</p>
      <p class="text-xs text-base-content/40">Create your account</p>
    </div>
    <!-- connector line -->
    <div class="absolute top-4 left-[calc(50%+20px)] right-[calc(-50%+20px)] h-0.5 bg-primary -translate-y-1/2"></div>
  </div>
  <!-- Step 2: active -->
  <div class="flex-1 flex flex-col items-center relative">
    <div class="size-8 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm font-semibold z-1">2</div>
    <div class="mt-2 text-center">
      <p class="text-sm font-medium">Profile</p>
    </div>
    <div class="absolute top-4 left-[calc(50%+20px)] right-[calc(-50%+20px)] h-0.5 bg-base-300 -translate-y-1/2"></div>
  </div>
  <!-- Step 3: pending -->
  <div class="flex-1 flex flex-col items-center">
    <div class="size-8 rounded-full bg-base-100 border-2 border-base-300 text-base-content/60 flex items-center justify-center text-sm font-semibold z-1">3</div>
    <div class="mt-2 text-center">
      <p class="text-sm font-medium text-base-content/60">Review</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// Update step states:
// step.classList.add('progress-steps-step-completed');
// step.classList.add('progress-steps-step-active');
// step.classList.remove('progress-steps-step-active');

Vertical Steps

Preview

Order placed

Your order has been confirmed

Processing

We are preparing your order

Shipping

On its way to you

Delivered

<div class="progress-steps progress-steps-vertical">
  <div class="progress-steps-step progress-steps-step-completed">
    <div class="progress-steps-indicator">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    </div>
    <div class="progress-steps-content">
      <p class="progress-steps-title">Order placed</p>
      <p class="progress-steps-description">Your order has been confirmed</p>
    </div>
  </div>
  <div class="progress-steps-step progress-steps-step-completed">
    <div class="progress-steps-indicator">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    </div>
    <div class="progress-steps-content">
      <p class="progress-steps-title">Processing</p>
      <p class="progress-steps-description">We are preparing your order</p>
    </div>
  </div>
  <div class="progress-steps-step progress-steps-step-active">
    <div class="progress-steps-indicator"><span>3</span></div>
    <div class="progress-steps-content">
      <p class="progress-steps-title">Shipping</p>
      <p class="progress-steps-description">On its way to you</p>
    </div>
  </div>
  <div class="progress-steps-step">
    <div class="progress-steps-indicator"><span>4</span></div>
    <div class="progress-steps-content">
      <p class="progress-steps-title">Delivered</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col">
  <!-- Step 1: completed -->
  <div class="flex flex-row items-start relative pb-6">
    <div class="size-8 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm font-semibold shrink-0 z-1">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    </div>
    <div class="ml-4 text-left pt-1">
      <p class="text-sm font-medium m-0">Order placed</p>
      <p class="text-xs m-0 mt-0.5 text-base-content/40">Your order has been confirmed</p>
    </div>
    <!-- connector line -->
    <div class="absolute left-4 top-9 bottom-1 w-0.5 bg-primary -translate-x-1/2"></div>
  </div>
  <!-- Step 2: completed -->
  <div class="flex flex-row items-start relative pb-6">
    <div class="size-8 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm font-semibold shrink-0 z-1">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    </div>
    <div class="ml-4 text-left pt-1">
      <p class="text-sm font-medium m-0">Processing</p>
      <p class="text-xs m-0 mt-0.5 text-base-content/40">We are preparing your order</p>
    </div>
    <!-- connector line -->
    <div class="absolute left-4 top-9 bottom-1 w-0.5 bg-primary -translate-x-1/2"></div>
  </div>
  <!-- Step 3: active -->
  <div class="flex flex-row items-start relative pb-6">
    <div class="size-8 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm font-semibold shrink-0 z-1">3</div>
    <div class="ml-4 text-left pt-1">
      <p class="text-sm font-medium m-0">Shipping</p>
      <p class="text-xs m-0 mt-0.5 text-base-content/40">On its way to you</p>
    </div>
    <!-- connector line -->
    <div class="absolute left-4 top-9 bottom-1 w-0.5 bg-base-300 -translate-x-1/2"></div>
  </div>
  <!-- Step 4: pending -->
  <div class="flex flex-row items-start relative">
    <div class="size-8 rounded-full bg-base-100 border-2 border-base-300 text-base-content/60 flex items-center justify-center text-sm font-semibold shrink-0 z-1">4</div>
    <div class="ml-4 text-left pt-1">
      <p class="text-sm font-medium m-0 text-base-content/60">Delivered</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// Same state management as horizontal

Sizes & Variants

Preview

Step 1

Step 2

Step 3

Info

Address

Payment

Confirm

<!-- Small -->
<div class="progress-steps progress-steps-horizontal progress-steps-sm mb-6">
  <div class="progress-steps-step progress-steps-step-completed">
    <div class="progress-steps-indicator"><svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div>
    <div class="progress-steps-content"><p class="progress-steps-title">Step 1</p></div>
  </div>
  <div class="progress-steps-step progress-steps-step-active">
    <div class="progress-steps-indicator"><span>2</span></div>
    <div class="progress-steps-content"><p class="progress-steps-title">Step 2</p></div>
  </div>
  <div class="progress-steps-step">
    <div class="progress-steps-indicator"><span>3</span></div>
    <div class="progress-steps-content"><p class="progress-steps-title">Step 3</p></div>
  </div>
</div>

<!-- Dots -->
<div class="progress-steps progress-steps-horizontal progress-steps-dots">
  <div class="progress-steps-step progress-steps-step-completed">
    <div class="progress-steps-indicator"></div>
    <div class="progress-steps-content"><p class="progress-steps-title">Info</p></div>
  </div>
  <div class="progress-steps-step progress-steps-step-active">
    <div class="progress-steps-indicator"></div>
    <div class="progress-steps-content"><p class="progress-steps-title">Address</p></div>
  </div>
  <div class="progress-steps-step">
    <div class="progress-steps-indicator"></div>
    <div class="progress-steps-content"><p class="progress-steps-title">Payment</p></div>
  </div>
  <div class="progress-steps-step">
    <div class="progress-steps-indicator"></div>
    <div class="progress-steps-content"><p class="progress-steps-title">Confirm</p></div>
  </div>
</div>

Requires: ux.min.css

<!-- Small -->
<div class="flex flex-row items-start mb-6">
  <!-- Step 1: completed -->
  <div class="flex-1 flex flex-col items-center relative">
    <div class="size-6 rounded-full bg-primary text-primary-content flex items-center justify-center text-xs font-semibold z-1">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    </div>
    <div class="mt-2 text-center">
      <p class="text-sm font-medium m-0">Step 1</p>
    </div>
    <div class="absolute top-3 left-[calc(50%+16px)] right-[calc(-50%+16px)] h-0.5 bg-primary -translate-y-1/2"></div>
  </div>
  <!-- Step 2: active -->
  <div class="flex-1 flex flex-col items-center relative">
    <div class="size-6 rounded-full bg-primary text-primary-content flex items-center justify-center text-xs font-semibold z-1">2</div>
    <div class="mt-2 text-center">
      <p class="text-sm font-medium m-0">Step 2</p>
    </div>
    <div class="absolute top-3 left-[calc(50%+16px)] right-[calc(-50%+16px)] h-0.5 bg-base-300 -translate-y-1/2"></div>
  </div>
  <!-- Step 3: pending -->
  <div class="flex-1 flex flex-col items-center">
    <div class="size-6 rounded-full bg-base-100 border-2 border-base-300 text-base-content/60 flex items-center justify-center text-xs font-semibold z-1">3</div>
    <div class="mt-2 text-center">
      <p class="text-sm font-medium m-0 text-base-content/60">Step 3</p>
    </div>
  </div>
</div>

<!-- Dots -->
<div class="flex flex-row items-start">
  <!-- Step 1: completed dot -->
  <div class="flex-1 flex flex-col items-center relative">
    <div class="size-3 rounded-full bg-primary shrink-0 z-1"></div>
    <div class="mt-2 text-center">
      <p class="text-sm font-medium m-0">Info</p>
    </div>
    <div class="absolute top-1.5 left-[calc(50%+10px)] right-[calc(-50%+10px)] h-0.5 bg-primary -translate-y-1/2"></div>
  </div>
  <!-- Step 2: active dot -->
  <div class="flex-1 flex flex-col items-center relative">
    <div class="size-3 rounded-full bg-primary shrink-0 z-1"></div>
    <div class="mt-2 text-center">
      <p class="text-sm font-medium m-0">Address</p>
    </div>
    <div class="absolute top-1.5 left-[calc(50%+10px)] right-[calc(-50%+10px)] h-0.5 bg-base-300 -translate-y-1/2"></div>
  </div>
  <!-- Step 3: pending dot -->
  <div class="flex-1 flex flex-col items-center relative">
    <div class="size-3 rounded-full bg-base-300 shrink-0 z-1"></div>
    <div class="mt-2 text-center">
      <p class="text-sm font-medium m-0 text-base-content/60">Payment</p>
    </div>
    <div class="absolute top-1.5 left-[calc(50%+10px)] right-[calc(-50%+10px)] h-0.5 bg-base-300 -translate-y-1/2"></div>
  </div>
  <!-- Step 4: pending dot -->
  <div class="flex-1 flex flex-col items-center">
    <div class="size-3 rounded-full bg-base-300 shrink-0 z-1"></div>
    <div class="mt-2 text-center">
      <p class="text-sm font-medium m-0 text-base-content/60">Confirm</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for display variants

Class	Description
`.progress-steps`	Base container
`.progress-steps-horizontal`	Horizontal layout
`.progress-steps-vertical`	Vertical layout
`.progress-steps-step`	Individual step
`.progress-steps-step-active`	Current step (filled primary)
`.progress-steps-step-completed`	Completed step
`.progress-steps-step-error`	Error state (red)
`.progress-steps-indicator`	Circle indicator (32px)
`.progress-steps-content`	Text content area
`.progress-steps-title`	Step title
`.progress-steps-description`	Step description
`.progress-steps-sm`	Small (24px indicators)
`.progress-steps-lg`	Large (40px indicators)
`.progress-steps-dots`	Dot-only indicators (12px)
`.progress-steps-outline`	Outline style indicators
`.progress-steps-bar`	Connected progress bar
`.progress-steps-clickable`	Clickable steps with hover
`.progress-steps-responsive`	Collapses to vertical on mobile