<div class="stepper">
<div class="stepper-header">
<div class="stepper-step stepper-step-completed">
<div class="stepper-circle">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="stepper-label">Account</div>
</div>
<div class="stepper-step stepper-step-active">
<div class="stepper-circle">2</div>
<div class="stepper-label">Profile</div>
</div>
<div class="stepper-step">
<div class="stepper-circle">3</div>
<div class="stepper-label">Review</div>
</div>
</div>
<div class="stepper-content">
<p>Step 2 content goes here...</p>
</div>
<div class="stepper-actions">
<div class="stepper-actions-start">
<button class="btn">Back</button>
</div>
<div class="stepper-actions-end">
<button class="btn color-primary">Continue</button>
</div>
</div>
</div>
Requires: ux.min.css
<div class="flex flex-col w-full">
<div class="flex items-start justify-between relative mb-8">
<!-- Completed step -->
<div class="flex flex-col items-center relative z-1 flex-1">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-success text-success-content font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="text-sm font-medium mt-2 text-success">Account</div>
</div>
<!-- Active step -->
<div class="flex flex-col items-center relative z-1 flex-1">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary text-primary-content font-semibold">2</div>
<div class="text-sm font-medium mt-2 text-primary">Profile</div>
</div>
<!-- Pending step -->
<div class="flex flex-col items-center relative z-1 flex-1">
<div class="flex items-center justify-center w-10 h-10 rounded-full border-2 border-base-300 bg-base-100 font-semibold text-base-content/60">3</div>
<div class="text-sm font-medium mt-2 text-base-content/60">Review</div>
</div>
</div>
<div class="flex-1 min-h-50"><p>Step 2 content goes here...</p></div>
<div class="flex justify-between items-center mt-8 pt-6 border-t border-base-200 gap-4">
<button class="btn">Back</button>
<button class="btn color-primary">Continue</button>
</div>
</div>
Requires: tw.min.css
// Toggle stepper-step-active / stepper-step-completed classes
// Update stepper-panel-active to show the correct panel
// Example:
// step.classList.remove('stepper-step-active');
// step.classList.add('stepper-step-completed');
// nextStep.classList.add('stepper-step-active');