Stepper
Basic Usage
<form action="#" method="post">
<div data-mv-stepper="true">
<div class="mv-card">
<div class="mv-card-header h-auto px-10 py-5">
<div data-mv-stepper-item="#stepper_1" class="active flex gap-2.5 items-center">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">1</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Step 1
</h4>
<span class="text-sm text-muted-foreground mv-stepper-item-completed:opacity-70">Description</span>
</div>
</div>
<div data-mv-stepper-item="#stepper_2" class="flex gap-2.5 items-center">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">2</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Step 2
</h4>
<span class="text-sm text-muted-foreground mv-stepper-item-completed:opacity-70">Description</span>
</div>
</div>
<div data-mv-stepper-item="#stepper_3" class="flex gap-2.5 items-center">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">3</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Step 3
</h4>
<span class="text-sm text-muted-foreground mv-stepper-item-completed:opacity-70">Description</span>
</div>
</div>
</div>
<div class="mv-card-content px-5 py-20">
<div class="" id="stepper_1">
<div class="flex items-center justify-center text-lg font-semibold text-mono">
Step
<!-- -->1
</div>
</div>
<div class="hidden" id="stepper_2">
<div class="flex items-center justify-center text-lg font-semibold text-mono">
Step
<!-- -->2
</div>
</div>
<div class="hidden" id="stepper_3">
<div class="flex items-center justify-center text-lg font-semibold text-mono">
Step
<!-- -->3
</div>
</div>
</div>
<div class="mv-card-footer justify-between p-5">
<div>
<button class="mv-btn mv-btn-secondary mv-stepper-first:hidden" data-mv-stepper-back="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true">
<path d="m12 19-7-7 7-7"></path>
<path d="M19 12H5"></path></svg>Back
</button>
</div>
<div>
<button class="mv-btn mv-btn-secondary mv-stepper-last:hidden" data-mv-stepper-next="true">
Next<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg></button><button class="mv-btn hidden mv-stepper-last:inline-flex">
Submit
</button>
</div>
</div>
</div>
</div>
</form>Vertical
<form action="#" method="post">
<div data-mv-stepper="true">
<div class="mv-card max-w-3xl">
<div class="flex">
<div class="flex w-40 shrink-0 flex-col gap-4 border-e border-border px-4 py-6">
<div data-mv-stepper-item="#stepper_vertical_1" class="active flex gap-2.5 items-start">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">1</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Account
</h4>
<span class="text-xs leading-snug text-muted-foreground mv-stepper-item-completed:opacity-70">Your personal details</span>
</div>
</div>
<div data-mv-stepper-item="#stepper_vertical_2" class="flex gap-2.5 items-start">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">2</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Billing
</h4>
<span class="text-xs leading-snug text-muted-foreground mv-stepper-item-completed:opacity-70">Payment information</span>
</div>
</div>
<div data-mv-stepper-item="#stepper_vertical_3" class="flex gap-2.5 items-start">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">3</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Review
</h4>
<span class="text-xs leading-snug text-muted-foreground mv-stepper-item-completed:opacity-70">Confirm and submit</span>
</div>
</div>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div class="mv-card-content flex flex-1 flex-col justify-center px-6 py-12">
<div class="" id="stepper_vertical_1">
<div class="space-y-2 text-center">
<div class="text-lg font-semibold text-mono">Account</div>
<p class="text-sm text-muted-foreground">
Your personal details
</p>
</div>
</div>
<div class="hidden" id="stepper_vertical_2">
<div class="space-y-2 text-center">
<div class="text-lg font-semibold text-mono">Billing</div>
<p class="text-sm text-muted-foreground">Payment information</p>
</div>
</div>
<div class="hidden" id="stepper_vertical_3">
<div class="space-y-2 text-center">
<div class="text-lg font-semibold text-mono">Review</div>
<p class="text-sm text-muted-foreground">Confirm and submit</p>
</div>
</div>
</div>
<div class="mv-card-footer justify-between p-5">
<div>
<button type="button" class="mv-btn mv-btn-secondary mv-stepper-first:hidden" data-mv-stepper-back="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true">
<path d="m12 19-7-7 7-7"></path>
<path d="M19 12H5"></path></svg>Back
</button>
</div>
<div>
<button type="button" class="mv-btn mv-btn-secondary mv-stepper-last:hidden" data-mv-stepper-next="true">
Next<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg></button><button type="button" class="mv-btn hidden mv-stepper-last:inline-flex">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>With Icons
<form action="#" method="post">
<div data-mv-stepper="true">
<div class="mv-card">
<div class="mv-card-header h-auto px-10 py-5">
<div data-mv-stepper-item="#stepper_icons_1" class="active flex gap-2.5 items-center">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user size-4 hidden mv-stepper-item-active:inline mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle></svg><span data-mv-stepper-number="true" class="text-sm font-semibold mv-stepper-item-active:hidden mv-stepper-item-completed:hidden">1</span>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Profile
</h4>
<span class="text-sm text-muted-foreground mv-stepper-item-completed:opacity-70">Basic information</span>
</div>
</div>
<div data-mv-stepper-item="#stepper_icons_2" class="flex gap-2.5 items-center">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card size-4 hidden mv-stepper-item-active:inline mv-stepper-item-completed:inline" aria-hidden="true">
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line></svg><span data-mv-stepper-number="true" class="text-sm font-semibold mv-stepper-item-active:hidden mv-stepper-item-completed:hidden">2</span>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Payment
</h4>
<span class="text-sm text-muted-foreground mv-stepper-item-completed:opacity-70">Card details</span>
</div>
</div>
<div data-mv-stepper-item="#stepper_icons_3" class="flex gap-2.5 items-center">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-active:inline mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path></svg><span data-mv-stepper-number="true" class="text-sm font-semibold mv-stepper-item-active:hidden mv-stepper-item-completed:hidden">3</span>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Done
</h4>
<span class="text-sm text-muted-foreground mv-stepper-item-completed:opacity-70">All set</span>
</div>
</div>
</div>
<div class="mv-card-content px-5 py-20">
<div class="" id="stepper_icons_1">
<div class="flex items-center justify-center text-lg font-semibold text-mono">
Profile
</div>
</div>
<div class="hidden" id="stepper_icons_2">
<div class="flex items-center justify-center text-lg font-semibold text-mono">
Payment
</div>
</div>
<div class="hidden" id="stepper_icons_3">
<div class="flex items-center justify-center text-lg font-semibold text-mono">
Done
</div>
</div>
</div>
<div class="mv-card-footer justify-between p-5">
<div>
<button type="button" class="mv-btn mv-btn-secondary mv-stepper-first:hidden" data-mv-stepper-back="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true">
<path d="m12 19-7-7 7-7"></path>
<path d="M19 12H5"></path></svg>Back
</button>
</div>
<div>
<button type="button" class="mv-btn mv-btn-secondary mv-stepper-last:hidden" data-mv-stepper-next="true">
Next<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg></button><button type="button" class="mv-btn hidden mv-stepper-last:inline-flex">
Submit
</button>
</div>
</div>
</div>
</div>
</form>On Modal
Setup wizard
<div>
<button type="button" class="mv-btn" data-mv-modal-toggle="#stepper-modal">
Open wizard
</button>
<div class="mv-modal" data-mv-modal="true" id="stepper-modal">
<div class="mv-modal-content max-w-lg top-[5%]">
<div class="mv-modal-header">
<h3 class="mv-modal-title">Setup wizard</h3>
<button type="button" class="mv-modal-close" aria-label="Close modal" data-mv-modal-dismiss="#stepper-modal">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="mv-modal-body">
<form action="#" method="post">
<div data-mv-stepper="true">
<div class="mv-card border-0 shadow-none">
<div class="mv-card-header h-auto px-2 py-4">
<div data-mv-stepper-item="#stepper_modal_1" class="active flex gap-2.5 items-center">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">1</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Step 1
</h4>
<span class="text-xs text-muted-foreground mv-stepper-item-completed:opacity-70">Account setup</span>
</div>
</div>
<div data-mv-stepper-item="#stepper_modal_2" class="flex gap-2.5 items-center">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">2</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Step 2
</h4>
<span class="text-xs text-muted-foreground mv-stepper-item-completed:opacity-70">Preferences</span>
</div>
</div>
<div data-mv-stepper-item="#stepper_modal_3" class="flex gap-2.5 items-center">
<div class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">3</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Step 3
</h4>
<span class="text-xs text-muted-foreground mv-stepper-item-completed:opacity-70">Confirmation</span>
</div>
</div>
</div>
<div class="mv-card-content px-2 py-10">
<div class="" id="stepper_modal_1">
<div class="flex items-center justify-center text-base font-semibold text-mono">
Step 1
</div>
</div>
<div class="hidden" id="stepper_modal_2">
<div class="flex items-center justify-center text-base font-semibold text-mono">
Step 2
</div>
</div>
<div class="hidden" id="stepper_modal_3">
<div class="flex items-center justify-center text-base font-semibold text-mono">
Step 3
</div>
</div>
</div>
<div class="mv-card-footer justify-between px-2 pb-0 pt-4">
<div>
<button type="button" class="mv-btn mv-btn-secondary mv-stepper-first:hidden" data-mv-stepper-back="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true">
<path d="m12 19-7-7 7-7"></path>
<path d="M19 12H5"></path></svg>Back
</button>
</div>
<div>
<button type="button" class="mv-btn mv-btn-secondary mv-stepper-last:hidden" data-mv-stepper-next="true">
Next<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg></button><button type="button" class="mv-btn hidden mv-stepper-last:inline-flex">
Finish
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>Programmatic
Click a step number to jump via
MVStepper.getOrCreateInstance(...).go(n).
<div class="space-y-4">
<form action="#" method="post">
<div id="stepper-programmatic-root" data-mv-stepper="true">
<div class="mv-card">
<div class="mv-card-header h-auto px-10 py-5">
<div data-mv-stepper-item="#stepper_programmatic_1" class="active flex gap-2.5 items-center">
<button type="button" data-stepper-go="1" class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground cursor-pointer mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">1</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</button>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Step 1
</h4>
<span class="text-sm text-muted-foreground mv-stepper-item-completed:opacity-70">Start here</span>
</div>
</div>
<div data-mv-stepper-item="#stepper_programmatic_2" class="flex gap-2.5 items-center">
<button type="button" data-stepper-go="2" class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground cursor-pointer mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">2</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</button>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Step 2
</h4>
<span class="text-sm text-muted-foreground mv-stepper-item-completed:opacity-70">Continue</span>
</div>
</div>
<div data-mv-stepper-item="#stepper_programmatic_3" class="flex gap-2.5 items-center">
<button type="button" data-stepper-go="3" class="shrink-0 rounded-full size-8 flex items-center justify-center text-sm font-semibold bg-muted text-muted-foreground cursor-pointer mv-stepper-item-active:bg-primary mv-stepper-item-active:text-primary-foreground mv-stepper-item-completed:bg-green-500 mv-stepper-item-completed:text-white">
<span data-mv-stepper-number="true" class="mv-stepper-item-completed:hidden">3</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 hidden mv-stepper-item-completed:inline" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</button>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono mv-stepper-item-completed:opacity-70">
Step 3
</h4>
<span class="text-sm text-muted-foreground mv-stepper-item-completed:opacity-70">Finish up</span>
</div>
</div>
</div>
<div class="mv-card-content px-5 py-20">
<div class="" id="stepper_programmatic_1">
<div class="flex items-center justify-center text-lg font-semibold text-mono">
Step 1
</div>
</div>
<div class="hidden" id="stepper_programmatic_2">
<div class="flex items-center justify-center text-lg font-semibold text-mono">
Step 2
</div>
</div>
<div class="hidden" id="stepper_programmatic_3">
<div class="flex items-center justify-center text-lg font-semibold text-mono">
Step 3
</div>
</div>
</div>
<div class="mv-card-footer justify-between p-5">
<div>
<button type="button" class="mv-btn mv-btn-secondary mv-stepper-first:hidden" data-mv-stepper-back="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true">
<path d="m12 19-7-7 7-7"></path>
<path d="M19 12H5"></path></svg>Back
</button>
</div>
<div>
<button type="button" class="mv-btn mv-btn-secondary mv-stepper-last:hidden" data-mv-stepper-next="true">
Next<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg></button><button type="button" class="mv-btn hidden mv-stepper-last:inline-flex">
Submit
</button>
</div>
</div>
</div>
</div>
</form>
<p class="text-muted-foreground text-xs">
Click a step number to jump via<!-- -->
<code class="text-foreground">MVStepper.getOrCreateInstance(...).go(n)</code>.
</p>
<script>
(function () {
function init() {
var root = document.getElementById("stepper-programmatic-root");
if (!root || !window.MVStepper) return;
if (root.getAttribute("data-stepper-programmatic-init") === "1") return;
root.setAttribute("data-stepper-programmatic-init", "1");
var stepper = window.MVStepper.getOrCreateInstance(root);
root.querySelectorAll("[data-stepper-go]").forEach(function (button) {
button.addEventListener("click", function () {
var step = button.getAttribute("data-stepper-go");
if (!step) return;
stepper.go(parseInt(step, 10));
});
});
}
function schedule() {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else if (window.MVStepper) {
setTimeout(init, 0);
} else {
window.addEventListener("load", init);
}
}
schedule();
})();
</script>
</div>