Progress Steps
Multi-step progress indicator with horizontal/vertical layouts, sizes, dots, bar, and clickable variants.
Horizontal Steps
Preview
Account
Create your account
2
Profile
Add your details
3
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
3
Shipping
On its way to you
4
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
2
Step 2
3
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 |