New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
Laravel Livewire KTStepper Not Working
I am using KTStepper on Laravel. I try on starter kit laravel livewire. I copied basig usage example KTStepper but not working correctly. 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 not shown class list.
Replies (1)
Hi
Sorry for the delay. This is a common issue when using KTUI components with Livewire due to DOM manipulation conflicts. Here's how to fix it:
<div data-kt-stepper="true">
<div class="kt-card">
<div class="kt-card-header flex justify-between items-center gap-4 py-8">
<div data-kt-stepper-item="#stepper_1" class="active flex gap-2.5 items-center">
<div class="rounded-full size-10 flex items-center justify-center text-md font-semibold bg-primary-light text-primary kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-inverse kt-stepper-item-completed:bg-success kt-stepper-item-completed:text-green-500-inverse">
<span data-kt-stepper-number="true" class="kt-stepper-item-completed:hidden">1</span>
<span class="hidden kt-stepper-item-completed:inline">✓</span>
</div>
<div class="flex flex-col gap-0.5">
<h4 class="text-sm font-medium text-mono kt-stepper-item-completed:text-secondary-foreground">Step 1</h4>
<span class="text-sm text-secondary-foreground kt-stepper-item-completed:text-muted-foreground">Description</span>
</div>
</div>
<!-- Repeat for other steps -->
</div>
<div class="kt-card-content py-16">
<div >
<!-- Step 1 content -->
</div>
<div class="hidden">
<!-- Step 2 content -->
</div>
<!-- More steps -->
</div>
<div class="kt-card-footer py-8 flex justify-between">
<button class="kt-btn kt-btn-outline kt-stepper-first:hidden" data-kt-stepper-back="true">Back</button>
<button class="kt-btn kt-btn-outline kt-stepper-last:hidden" data-kt-stepper-next="true">Next</button>
</div>
</div>
</div>Add Livewire Integration Script:
// In your Livewire component or main JS file
document.addEventListener("livewire:init", () => {
// Initialize KTStepper after Livewire loads
if (typeof window.KTStepper !== "undefined") {
window.KTStepper.init();
}
});
document.addEventListener("livewire:updated", () => {
// Re-initialize KTStepper after Livewire updates
const stepperElements = document.querySelectorAll("[data-kt-stepper]");
stepperElements.forEach(element => {
if (window.KTStepper) {
window.KTStepper.getInstance(element) || new window.KTStepper(element);
}
});
});
