Tailwind Stepper component provides a visually intuitive way to guide users through multi-step processes or forms. Utilizing Tailwind's utility classes, it offers customizable styles for each step, making it easy to indicate progress and navigate between steps.
<form action="#" method="post">
<div data-kt-stepper="true">
<div class="kt-card">
<div class="kt-card-header h-auto px-10 py-5">
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Step 1
</h4>
<span
class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
>Description</span
>
</div>
</div>
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Step 2
</h4>
<span
class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
>Description</span
>
</div>
</div>
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Step 3
</h4>
<span
class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
>Description</span
>
</div>
</div>
</div>
<div class="kt-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="kt-card-footer justify-between p-5">
<div>
<button
class="kt-btn kt-btn-secondary kt-stepper-first:hidden"
data-kt-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="kt-btn kt-btn-secondary kt-stepper-last:hidden"
data-kt-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="kt-btn hidden kt-stepper-last:inline-flex">
Submit
</button>
</div>
</div>
</div>
</div>
</form>
<form action="#" method="post">
<div data-kt-stepper="true">
<div class="kt-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-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Account
</h4>
<span
class="text-xs leading-snug text-muted-foreground kt-stepper-item-completed:opacity-70"
>Your personal details</span
>
</div>
</div>
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Billing
</h4>
<span
class="text-xs leading-snug text-muted-foreground kt-stepper-item-completed:opacity-70"
>Payment information</span
>
</div>
</div>
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Review
</h4>
<span
class="text-xs leading-snug text-muted-foreground kt-stepper-item-completed:opacity-70"
>Confirm and submit</span
>
</div>
</div>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div
class="kt-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="kt-card-footer justify-between p-5">
<div>
<button
type="button"
class="kt-btn kt-btn-secondary kt-stepper-first:hidden"
data-kt-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="kt-btn kt-btn-secondary kt-stepper-last:hidden"
data-kt-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="kt-btn hidden kt-stepper-last:inline-flex"
>
Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<form action="#" method="post">
<div data-kt-stepper="true">
<div class="kt-card">
<div class="kt-card-header h-auto px-10 py-5">
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-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 kt-stepper-item-active:inline kt-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-kt-stepper-number="true"
class="text-sm font-semibold kt-stepper-item-active:hidden kt-stepper-item-completed:hidden"
>1</span
>
</div>
<div class="flex flex-col gap-0.5">
<h4
class="text-sm font-medium text-mono kt-stepper-item-completed:opacity-70"
>
Profile
</h4>
<span
class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
>Basic information</span
>
</div>
</div>
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-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 kt-stepper-item-active:inline kt-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-kt-stepper-number="true"
class="text-sm font-semibold kt-stepper-item-active:hidden kt-stepper-item-completed:hidden"
>2</span
>
</div>
<div class="flex flex-col gap-0.5">
<h4
class="text-sm font-medium text-mono kt-stepper-item-completed:opacity-70"
>
Payment
</h4>
<span
class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
>Card details</span
>
</div>
</div>
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-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 kt-stepper-item-active:inline kt-stepper-item-completed:inline"
aria-hidden="true"
>
<path d="M20 6 9 17l-5-5"></path></svg
><span
data-kt-stepper-number="true"
class="text-sm font-semibold kt-stepper-item-active:hidden kt-stepper-item-completed:hidden"
>3</span
>
</div>
<div class="flex flex-col gap-0.5">
<h4
class="text-sm font-medium text-mono kt-stepper-item-completed:opacity-70"
>
Done
</h4>
<span
class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
>All set</span
>
</div>
</div>
</div>
<div class="kt-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="kt-card-footer justify-between p-5">
<div>
<button
type="button"
class="kt-btn kt-btn-secondary kt-stepper-first:hidden"
data-kt-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="kt-btn kt-btn-secondary kt-stepper-last:hidden"
data-kt-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="kt-btn hidden kt-stepper-last:inline-flex"
>
Submit
</button>
</div>
</div>
</div>
</div>
</form>
<div>
<button type="button" class="kt-btn" data-kt-modal-toggle="#stepper-modal">
Open wizard
</button>
<div class="kt-modal" data-kt-modal="true" id="stepper-modal">
<div class="kt-modal-content max-w-lg top-[5%]">
<div class="kt-modal-header">
<h3 class="kt-modal-title">Setup wizard</h3>
<button
type="button"
class="kt-modal-close"
aria-label="Close modal"
data-kt-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="kt-modal-body">
<form action="#" method="post">
<div data-kt-stepper="true">
<div class="kt-card border-0 shadow-none">
<div class="kt-card-header h-auto px-2 py-4">
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Step 1
</h4>
<span
class="text-xs text-muted-foreground kt-stepper-item-completed:opacity-70"
>Account setup</span
>
</div>
</div>
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Step 2
</h4>
<span
class="text-xs text-muted-foreground kt-stepper-item-completed:opacity-70"
>Preferences</span
>
</div>
</div>
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Step 3
</h4>
<span
class="text-xs text-muted-foreground kt-stepper-item-completed:opacity-70"
>Confirmation</span
>
</div>
</div>
</div>
<div class="kt-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="kt-card-footer justify-between px-2 pb-0 pt-4">
<div>
<button
type="button"
class="kt-btn kt-btn-secondary kt-stepper-first:hidden"
data-kt-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="kt-btn kt-btn-secondary kt-stepper-last:hidden"
data-kt-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="kt-btn hidden kt-stepper-last:inline-flex"
>
Finish
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="space-y-4">
<form action="#" method="post">
<div id="stepper-programmatic-root" data-kt-stepper="true">
<div class="kt-card">
<div class="kt-card-header h-auto px-10 py-5">
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Step 1
</h4>
<span
class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
>Start here</span
>
</div>
</div>
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Step 2
</h4>
<span
class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
>Continue</span
>
</div>
</div>
<div
data-kt-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 kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-foreground kt-stepper-item-completed:bg-green-500 kt-stepper-item-completed:text-white"
>
<span
data-kt-stepper-number="true"
class="kt-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 kt-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 kt-stepper-item-completed:opacity-70"
>
Step 3
</h4>
<span
class="text-sm text-muted-foreground kt-stepper-item-completed:opacity-70"
>Finish up</span
>
</div>
</div>
</div>
<div class="kt-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="kt-card-footer justify-between p-5">
<div>
<button
type="button"
class="kt-btn kt-btn-secondary kt-stepper-first:hidden"
data-kt-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="kt-btn kt-btn-secondary kt-stepper-last:hidden"
data-kt-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="kt-btn hidden kt-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">KTStepper.getOrCreateInstance(...).go(n)</code
>.
</p>
<script>
(function () {
function init() {
var root = document.getElementById("stepper-programmatic-root");
if (!root || !window.KTStepper) return;
if (root.getAttribute("data-stepper-programmatic-init") === "1") return;
root.setAttribute("data-stepper-programmatic-init", "1");
var stepper = window.KTStepper.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.KTStepper) {
setTimeout(init, 0);
} else {
window.addEventListener("load", init);
}
}
schedule();
})();
</script>
</div>
These data attributes allow you to set options for the stepper component during auto initialization.
| Option | Type | Default | Description |
|---|---|---|---|
data-kt-stepper-active-step | Specifies the active step number when the stepper is first initialized, indicating which step should be active at the start. | ||
data-kt-stepper-hidden-class |
This table details the custom classes and data attributes used by the stepper component.
| Name | Description |
|---|---|
| Data Attributes | |
data-kt-stepper="true" | Automatically initializes Tailwind Stepper instances on page load. |
data-kt-stepper-item="#stepper_content_id" | Links a step to its content using the ID selector, controlling content visibility based on the active step. |
Custom modifiers to control the accordion’s style and behavior with Tailwind classes.
| Name | Description |
|---|---|
kt-stepper-first:* | A custom Tailwind variant activated when the first stepper item is active, indicating the beginning of the stepper process. |
kt-stepper-between:* | A custom Tailwind variant activated for stepper items that are between the first and last, indicating mid-process steps. |
kt-stepper-last:* | A custom Tailwind variant activated when the last stepper item is active, indicating the end of the stepper process. |
Use KTStepper component's API methods to programmatically control its behavior.
| Method | Description |
|---|---|
new KTStepper(element, options) | Creates an object instance of the KTStepper class for the given DOM element and configuration options. |
go(step) | Navigates to the step with the specified step number in the stepper sequence. |
goTo(itemElement) | Navigates to the stepper item associated with the specified DOM element object. |
const stepperEl = document.querySelector('#my_stepper');
const stepper = KTStepper.getInstance(stepperEl);
stepper.goNext();
stepper.go(3);Manage and interact with KTStepper instances using these static methods of KTStepper JavaScript class.
| Method | Description |
|---|---|
init() | Automatically initializes KTStepper object for all elements with the |
createInstances() | Allows to create KTStepper instances for all elements that have been dynamically added to the DOM but haven't been activated yet. |
getInstance(element) | Returns the |
// Initialize all steppers
KTStepper.init();
// Initialzie pending steppers
KTStepper.createInstances();
// Get stepper object
const stepperEl = document.querySelector('#my_stepper');
const stepper = KTStepper.getInstance(stepperEl);KTStepper custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
| Event | Description |
|---|---|
change | This event triggers before a stepper step is changed, allowing actions to be performed prior to the step transition. |
changed | This event triggers after a stepper step has changed, providing a hook to execute actions following the step transition. |
const stepperEl = document.querySelector('#my_stepper');
const stepper = KTStepper.getInstance(stepperEl);
stepper.on('change', (detail) => {
detail.cancel = true;
console.log('change action canceled');
});
stepper.on('changed', () => {
console.log('changed event');
});Import the component and types from @keenthemes/ktui for typed options and instance:
import {
KTStepper,
type KTStepperConfigInterface,
type KTStepperInterface,
} from '@keenthemes/ktui';
const stepperEl = document.querySelector<HTMLElement>('#my_stepper');
if (!stepperEl) return;
const stepper: KTStepperInterface | null = KTStepper.getInstance(stepperEl);
if (stepper) stepper.on('changed', () => {});
const options: KTStepperConfigInterface = {};
const instance: KTStepperInterface = new| Defines a Tailwind class applied to hide the stepper contents when they are not active. |
data-kt-stepper-number="true"| Specifies an element that for dynamically print step number. |
| Classes |
first | Applied to the stepper root element when current step is first. |
last | Applied to the stepper root element when current step is last. |
between | Applied to the stepper root element when current step is between. |
active | Applied to the stepper active item. |
completed | Applied to the stepper completed item. |
pending | Applied to the stepper pending item. |
kt-stepper-item-active:* | A custom Tailwind variant for the currently active stepper item, highlighting the current step in the process. |
kt-stepper-item-completed:* | A custom Tailwind variant for stepper items that have been completed, indicating past steps in the process. |
kt-stepper-item-pending:* | A custom Tailwind variant for stepper items that are pending, indicating future steps yet to be reached in the process. |
goFirst() |
| Navigates to the first step in the stepper sequence. |
goLast() | Navigates to the last step in the stepper sequence. |
goNext() | Moves the stepper to the next step in the sequence. |
goBack() | Moves the stepper to the previous step in the sequence. |
update() | Updates the stepper layout and state to reflect any changes in the DOM or stepper configuration. |
getStep(itemElement) | Returns the step number associated with the specified DOM element object. |
getItemElement(step) | Returns the DOM element object associated with the specified step number. |
getTotalSteps() | Returns the total number of steps in the stepper sequence. |
getItemElements() | Returns an array of all the DOM element objects in the stepper sequence. |
getOption(name) | Retrieves the value of a configuration option by |
getElement() | Retrieves the DOM element linked to a specific KTStepper instance. |
on(eventName, handler) | Allows attaching event listeners to the KTStepper custom events using the |
off(eventName, eventId) | Removes an event listener for the |
dispose() | Removes the KTStepper instance from an element, including any associated data stored on the DOM element. |
getOrCreateInstance(element) | Returns the existing |