Docs
Navigations
Stepper

Tailwind CSS Stepper

The Stepper Component offers a clear representation of progress in a multi-step process, such as a wizard or a form with multiple sections. It guides users through each step, providing visual cues about their current position and the remaining steps.

Basic usage

Default stepper

Use a static stepper to show progress when the current step does not change interactively.

<li class="shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 w-full inline-flex items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  2
                                </span>
                                <div class="ms-2 w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="mt-3">
                                <span class="block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                            </li>

<li class="shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 w-full inline-flex items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  3
                                </span>
                                <div class="ms-2 w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="mt-3">
                                <span class="block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-row gap-x-2">
                            
                            <li class="shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 w-full inline-flex items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  1
                                </span>
                                <div class="ms-2 w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="mt-3">
                                <span class="block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                            </li>

<li class="shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 w-full inline-flex items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  3
                                </span>
                                <div class="ms-2 w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="mt-3">
                                <span class="block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                            </li>
                            
                          </ul>

Vertical stepper New

Stack the same static pattern vertically for narrow layouts, side panels, or settings flows.

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-xs text-surface-foreground rounded-full">
                                  2
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <span class="block text-sm font-medium text-foreground">
                                  Workspace setup
                                </span>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Connect the tools you plan to use, choose your preferences, and review the default settings before inviting collaborators into the project.
                                </p>
                              </div>
                            </li>

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-xs text-surface-foreground rounded-full">
                                  3
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <span class="block text-sm font-medium text-foreground">
                                  Final review
                                </span>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Double-check the summary, confirm the important details, and publish when everything looks ready for the next stage of the process.
                                </p>
                              </div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-col gap-y-2">
                            
                            <li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-xs text-surface-foreground rounded-full">
                                  1
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <span class="block text-sm font-medium text-foreground">
                                  Profile details
                                </span>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Add your full name, role, and a short introduction so teammates can immediately understand who you are and what you are responsible for across the workspace.
                                </p>
                              </div>
                            </li>

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-xs text-surface-foreground rounded-full">
                                  3
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <span class="block text-sm font-medium text-foreground">
                                  Final review
                                </span>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Double-check the summary, confirm the important details, and publish when everything looks ready for the next stage of the process.
                                </p>
                              </div>
                            </li>
                            
                          </ul>

Linear stepper

Use a linear stepper to guide people through steps in a fixed sequence.

<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  3
                                </span>
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-row gap-x-2">
                            
                            <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  1
                                </span>
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>

Vertical linear stepper New

Use the same sequential flow in a vertical layout for stacked or narrow interfaces.

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-xs text-surface-foreground rounded-full">
                                  2
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Team access
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Invite collaborators, assign roles, and review the permissions each person should receive before the workspace goes live.
                                </p>
                              </div>
                            </li>

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-xs text-surface-foreground rounded-full">
                                  3
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Launch review
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Review the summary, confirm the setup choices, and finish onboarding once everything is ready for the next step.
                                </p>
                              </div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-col gap-y-2">
                            
                            <li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-xs text-surface-foreground rounded-full">
                                  1
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Account details
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Enter your email, create a secure password, and add the basic profile details needed to start working inside the product.
                                </p>
                              </div>
                            </li>

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-xs text-surface-foreground rounded-full">
                                  2
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Team access
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Invite collaborators, assign roles, and review the permissions each person should receive before the workspace goes live.
                                </p>
                              </div>
                            </li>

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-xs text-surface-foreground rounded-full">
                                  3
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Launch review
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Review the summary, confirm the setup choices, and finish onboarding once everything is ready for the next step.
                                </p>
                              </div>
                            </li>
                            
                          </ul>

Responsive stepper

This stepper switches from vertical on small screens to horizontal from md and up.

Reduce browser size to see it in action

<li class="sm:shrink sm:basis-0 flex-1 group flex gap-x-2 sm:block">
                              <div class="min-w-7 min-h-7 flex flex-col items-center sm:w-full sm:inline-flex sm:flex-wrap sm:flex-row text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  2
                                </span>
                                <div class="mt-2 w-px h-full sm:mt-0 sm:ms-2 sm:w-full sm:h-px sm:flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow sm:grow-0 sm:mt-3 pb-5">
                                <span class="block text-sm font-medium text-foreground">
                                  Step
                                </span>
                                <p class="text-sm text-muted-foreground-1">
                                  This is a description text.
                                </p>
                              </div>
                            </li>

<li class="sm:shrink sm:basis-0 flex-1 group flex gap-x-2 sm:block">
                              <div class="min-w-7 min-h-7 flex flex-col items-center sm:w-full sm:inline-flex sm:flex-wrap sm:flex-row text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  3
                                </span>
                                <div class="mt-2 w-px h-full sm:mt-0 sm:ms-2 sm:w-full sm:h-px sm:flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow sm:grow-0 sm:mt-3 pb-5">
                                <span class="block text-sm font-medium text-foreground">
                                  Step
                                </span>
                                <p class="text-sm text-muted-foreground-1">
                                  This is a description text.
                                </p>
                              </div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-col sm:flex-row gap-2">
                            
                            <li class="sm:shrink sm:basis-0 flex-1 group flex gap-x-2 sm:block">
                              <div class="min-w-7 min-h-7 flex flex-col items-center sm:w-full sm:inline-flex sm:flex-wrap sm:flex-row text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  1
                                </span>
                                <div class="mt-2 w-px h-full sm:mt-0 sm:ms-2 sm:w-full sm:h-px sm:flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow sm:grow-0 sm:mt-3 pb-5">
                                <span class="block text-sm font-medium text-foreground">
                                  Step
                                </span>
                                <p class="text-sm text-muted-foreground-1">
                                  This is a description text.
                                </p>
                              </div>
                            </li>

<li class="sm:shrink sm:basis-0 flex-1 group flex gap-x-2 sm:block">
                              <div class="min-w-7 min-h-7 flex flex-col items-center sm:w-full sm:inline-flex sm:flex-wrap sm:flex-row text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  3
                                </span>
                                <div class="mt-2 w-px h-full sm:mt-0 sm:ms-2 sm:w-full sm:h-px sm:flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow sm:grow-0 sm:mt-3 pb-5">
                                <span class="block text-sm font-medium text-foreground">
                                  Step
                                </span>
                                <p class="text-sm text-muted-foreground-1">
                                  This is a description text.
                                </p>
                              </div>
                            </li>
                            
                          </ul>

Responsive linear stepper

The linear version uses the same responsive layout pattern, switching to horizontal from md and up.

Reduce browser size to see it in action

<li class="flex flex-col sm:flex-row sm:items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle grow sm:grow-0">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  2
                                </span>
                                <span class="ms-2 block grow sm:grow-0 text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="mt-2 w-px h-4 sm:mt-0 ms-3.5 sm:ms-0 sm:w-full sm:h-px sm:flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>

<li class="flex flex-col sm:flex-row sm:items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle grow sm:grow-0">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  3
                                </span>
                                <span class="ms-2 block grow sm:grow-0 text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="mt-2 w-px h-4 sm:mt-0 ms-3.5 sm:ms-0 sm:w-full sm:h-px sm:flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-col sm:flex-row gap-2">
                            
                            <li class="flex flex-col sm:flex-row sm:items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle grow sm:grow-0">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  1
                                </span>
                                <span class="ms-2 block grow sm:grow-0 text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="mt-2 w-px h-4 sm:mt-0 ms-3.5 sm:ms-0 sm:w-full sm:h-px sm:flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>

<li class="flex flex-col sm:flex-row sm:items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle grow sm:grow-0">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  3
                                </span>
                                <span class="ms-2 block grow sm:grow-0 text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="mt-2 w-px h-4 sm:mt-0 ms-3.5 sm:ms-0 sm:w-full sm:h-px sm:flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>
                            
                          </ul>

Style variants

White stepper

Use the light style for a softer stepper treatment with minimal visual weight.

<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-layer border border-layer-line font-medium text-layer-foreground rounded-full">
                                  3
                                </span>
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-row gap-x-2">
                            
                            <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-layer border border-layer-line font-medium text-layer-foreground rounded-full">
                                  1
                                </span>
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>

Vertical white stepper New

Use the same light variant in a vertical layout for stacked flows and narrow spaces.

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-layer border border-layer-line font-medium text-xs text-layer-foreground rounded-full">
                                  2
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Member setup
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Invite your team, assign responsibilities, and review the access each person should have before moving forward.
                                </p>
                              </div>
                            </li>

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-layer border border-layer-line font-medium text-xs text-layer-foreground rounded-full">
                                  3
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Final check
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Confirm the settings, review the summary, and publish the setup once everything is ready for the next stage.
                                </p>
                              </div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-col gap-y-2">
                            
                            <li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-layer border border-layer-line font-medium text-xs text-layer-foreground rounded-full">
                                  1
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Workspace info
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Add the workspace name, choose a clear description, and set the core details teammates will see when they join.
                                </p>
                              </div>
                            </li>

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-layer border border-layer-line font-medium text-xs text-layer-foreground rounded-full">
                                  3
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Final check
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Confirm the settings, review the summary, and publish the setup once everything is ready for the next stage.
                                </p>
                              </div>
                            </li>
                            
                          </ul>

Solid stepper

Use the solid style for a stronger, higher-contrast step indicator.

<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-secondary font-medium text-secondary-foreground rounded-full">
                                  3
                                </span>
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-row gap-x-2">
                            
                            <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-secondary font-medium text-secondary-foreground rounded-full">
                                  1
                                </span>
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>

Vertical solid stepper New

Stack the solid variant vertically for narrow layouts while keeping the stronger emphasis.

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-secondary font-medium text-xs text-secondary-foreground rounded-full">
                                  2
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Team workflow
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Configure how collaborators work together, review responsibilities, and confirm the process before launch.
                                </p>
                              </div>
                            </li>

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-secondary font-medium text-xs text-secondary-foreground rounded-full">
                                  3
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Ready to launch
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Review the final summary, validate your choices, and publish once everything is prepared for the next step.
                                </p>
                              </div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-col gap-y-2">
                            
                            <li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-secondary font-medium text-xs text-secondary-foreground rounded-full">
                                  1
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Setup basics
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Add the project name, choose the primary settings, and define the essentials that shape the rest of the workflow.
                                </p>
                              </div>
                            </li>

<li class="flex gap-x-4 group">
                              <div class="flex flex-col items-center">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-secondary font-medium text-xs text-secondary-foreground rounded-full">
                                  3
                                </span>
                                <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                              <div class="grow pb-6 group-last:pb-0">
                                <div class="min-w-7 min-h-7 inline-flex items-center text-xs align-middle">
                                  <span class="block text-sm font-medium text-foreground">
                                    Ready to launch
                                  </span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  Review the final summary, validate your choices, and publish once everything is prepared for the next step.
                                </p>
                              </div>
                            </li>
                            
                          </ul>

Stepper alignment

Centered stepper

Center the stepper within its container when the layout needs more balanced alignment.

<li class="shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 w-full inline-flex items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  3
                                </span>
                                <div class="ms-2 w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-row gap-x-2 max-w-xs mx-auto">
                            
                            <li class="shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 w-full inline-flex items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full">
                                  1
                                </span>
                                <div class="ms-2 w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                              </div>
                            </li>

Stepper with icons and avatars

Add icons or avatars to steps when labels benefit from extra visual context.

<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-layer border border-layer-line font-medium text-layer-foreground rounded-full">
                                  <svg class="shrink-0 size-4" 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"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"/><path d="m15 9 6-6"/></svg>
                                </span>
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>

<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-layer border border-layer-line font-medium text-layer-foreground rounded-full">
                                  <span class="animate-spin inline-block size-4 border-3 border-current border-t-transparent rounded-[999px] text-primary" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                  </span>
                                </span>
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>
                            
                          </ul>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<ul class="relative flex flex-row gap-x-2">
                            
                            <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <img class="shrink-0 size-7 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>

<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-layer border border-layer-line font-medium text-layer-foreground rounded-full">
                                  <svg class="shrink-0 size-4" 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"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"/><path d="m15 9 6-6"/></svg>
                                </span>
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>

<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group">
                              <div class="min-w-7 min-h-7 inline-flex justify-center items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-layer border border-layer-line font-medium text-layer-foreground rounded-full">
                                  <span class="animate-spin inline-block size-4 border-3 border-current border-t-transparent rounded-[999px] text-primary" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                  </span>
                                </span>
                                <span class="ms-2 block text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </div>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden"></div>
                            </li>
                            
                          </ul>

Dynamic form

Dynamic linear stepper

Requires JS

Note that this component requires the use of our Stepper plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Use a dynamic linear stepper for multi-step forms that advance as each step is completed.

<div class="mt-5 sm:mt-8">
                              
                              <div data-hs-stepper-content-item='{
                                "index": 1
                              }'>
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    First content
                                  </h3>
                                </div>
                              </div>

<div data-hs-stepper-content-item='{
                                "index": 2
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Second content
                                  </h3>
                                </div>
                              </div>

<div data-hs-stepper-content-item='{
                                "index": 3
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Third content
                                  </h3>
                                </div>
                              </div>

<div data-hs-stepper-content-item='{
                                "isFinal": true
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Final content
                                  </h3>
                                </div>
                              </div>

<div class="mt-5 flex justify-between items-center gap-x-2">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
                                  <svg class="shrink-0 size-4" 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"><path d="m15 18-6-6 6-6"/></svg>
                                  Back
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
                                  Next
                                  <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none"  data-hs-stepper-finish-btn style="display: none;">
                                  Finish
                                </button>
                                <button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
                                  Reset
                                </button>
                              </div>
                              
                            </div>
                            
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div data-hs-stepper>
                            
                            <ul class="relative flex flex-row gap-x-2">
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                                "index": 1
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary hs-stepper-completed:bg-teal-600"></div>
                              </li>

Vertical dynamic linear stepper New

Use the same guided flow in a vertical layout for stacked forms and narrower screens.

<li class="flex gap-x-4 group" data-hs-stepper-nav-item='{
                                "index": 2
                              }'>
                                <div class="flex flex-col items-center">
                                  <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle">
                                    <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                      <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
                                      <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    </span>
                                  </span>
                                  <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary hs-stepper-completed:bg-teal-600"></div>
                                </div>
                                <div class="grow pb-6 group-last:pb-0">
                                  <span class="block text-sm font-medium text-foreground">
                                    Team setup
                                  </span>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    Invite and assign.
                                  </p>
                                </div>
                              </li>

<li class="flex gap-x-4 group" data-hs-stepper-nav-item='{
                                "index": 3
                              }'>
                                <div class="flex flex-col items-center">
                                  <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle">
                                    <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                      <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
                                      <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    </span>
                                  </span>
                                  <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary hs-stepper-completed:bg-teal-600"></div>
                                </div>
                                <div class="grow pb-6 group-last:pb-0">
                                  <span class="block text-sm font-medium text-foreground">
                                    Launch review
                                  </span>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    Final confirmation.
                                  </p>
                                </div>
                              </li>
                            </ul>

<div class="grow">
                              <div data-hs-stepper-content-item='{
                                "index": 1
                              }'>
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    First content
                                  </h3>
                                </div>
                              </div>

<div data-hs-stepper-content-item='{
                                "index": 2
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Second content
                                  </h3>
                                </div>
                              </div>

<div data-hs-stepper-content-item='{
                                "index": 3
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Third content
                                  </h3>
                                </div>
                              </div>

<div data-hs-stepper-content-item='{
                                "isFinal": true
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Final content
                                  </h3>
                                </div>
                              </div>

<div data-hs-stepper class="flex gap-8">
                            
                            <ul class="relative flex flex-col gap-y-2 w-64 shrink-0">
                              <li class="flex gap-x-4 group" data-hs-stepper-nav-item='{
                                "index": 1
                              }'>
                                <div class="flex flex-col items-center">
                                  <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle">
                                    <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                      <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
                                      <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    </span>
                                  </span>
                                  <div class="mt-2 w-px h-full flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary hs-stepper-completed:bg-teal-600"></div>
                                </div>
                                <div class="grow pb-6 group-last:pb-0">
                                  <span class="block text-sm font-medium text-foreground">
                                    Account details
                                  </span>
                                  <p class="mt-1 text-sm text-muted-foreground-1">
                                    Basic profile info.
                                  </p>
                                </div>
                              </li>

Non-linear stepper

Use a non-linear stepper when people can revisit or complete steps out of order.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-2xl mx-auto mt-4 space-y-4">
                          <div data-hs-stepper='{
                            "mode": "non-linear"
                          }'>
                            
                            <ul class="relative flex flex-row gap-x-2">
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group active" data-hs-stepper-nav-item='{
                                "index": 1
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                                "index": 2
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                                "index": 3
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
                            </ul>
                            
  
                            
                            <div class="mt-5 sm:mt-8">
                              
                              <div data-hs-stepper-content-item='{
                                "index": 1
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    First content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 2
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Second content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 3
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Third content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "isFinal": true
                              }'>
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Final content
                                  </h3>
                                </div>
                              </div>
                              
    
                              <div class="mt-5 flex justify-between items-center gap-x-2">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
                                  <svg class="shrink-0 size-4" 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"><path d="m15 18-6-6 6-6"/></svg>
                                  Back
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-skip-btn style="display: none;">
                                  Skip
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-complete-step-btn='{
                                  "completedText": "This step is completed"
                                }'>
                                  Complete Step
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
                                  Next
                                  <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none"  data-hs-stepper-finish-btn style="display: none;">
                                  Finish
                                </button>
                                <button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
                                  Reset
                                </button>
                              </div>
                            </div>
                            
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div data-hs-stepper='{
                            "mode": "non-linear"
                          }'>
                            
                            <ul class="relative flex flex-row gap-x-2">
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group active" data-hs-stepper-nav-item='{
                                "index": 1
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                                "index": 2
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                                "index": 3
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
                            </ul>
                            
  
                            
                            <div class="mt-5 sm:mt-8">
                              
                              <div data-hs-stepper-content-item='{
                                "index": 1
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    First content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 2
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Second content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 3
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Third content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "isFinal": true
                              }'>
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Final content
                                  </h3>
                                </div>
                              </div>
                              
    
                              <div class="mt-5 flex justify-between items-center gap-x-2">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
                                  <svg class="shrink-0 size-4" 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"><path d="m15 18-6-6 6-6"/></svg>
                                  Back
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-skip-btn style="display: none;">
                                  Skip
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-complete-step-btn='{
                                  "completedText": "This step is completed"
                                }'>
                                  Complete Step
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
                                  Next
                                  <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none"  data-hs-stepper-finish-btn style="display: none;">
                                  Finish
                                </button>
                                <button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
                                  Reset
                                </button>
                              </div>
                            </div>
                            
                          </div>

Skippable step

Include a skip action when some steps are optional.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-2xl mx-auto mt-4 space-y-4">
                          <div data-hs-stepper>
                            
                            <ul class="relative flex flex-row gap-x-2">
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group active" data-hs-stepper-nav-item='{
                                "index": 1,
                                "isOptional": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                                "index": 2,
                                "isOptional": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                                "index": 3
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
                            </ul>
                            
  
                            
                            <div class="mt-5 sm:mt-8">
                              
                              <div data-hs-stepper-content-item='{
                                "index": 1
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    First content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 2
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Second content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 3
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Third content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "isFinal": true
                              }'>
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Final content
                                  </h3>
                                </div>
                              </div>
                              
    
                              <div class="mt-5 flex justify-between items-center gap-x-2">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
                                  <svg class="shrink-0 size-4" 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"><path d="m15 18-6-6 6-6"/></svg>
                                  Back
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-skip-btn style="display: none;">
                                  Skip
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
                                  Next
                                  <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none"  data-hs-stepper-finish-btn style="display: none;">
                                  Finish
                                </button>
                                <button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
                                  Reset
                                </button>
                              </div>
                            </div>
                            
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div data-hs-stepper>
                            
                            <ul class="relative flex flex-row gap-x-2">
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group active" data-hs-stepper-nav-item='{
                                "index": 1,
                                "isOptional": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                                "index": 2,
                                "isOptional": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                                "index": 3
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
                            </ul>
                            
  
                            
                            <div class="mt-5 sm:mt-8">
                              
                              <div data-hs-stepper-content-item='{
                                "index": 1
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    First content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 2
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Second content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 3
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Third content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "isFinal": true
                              }'>
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Final content
                                  </h3>
                                </div>
                              </div>
                              
    
                              <div class="mt-5 flex justify-between items-center gap-x-2">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
                                  <svg class="shrink-0 size-4" 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"><path d="m15 18-6-6 6-6"/></svg>
                                  Back
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-skip-btn style="display: none;">
                                  Skip
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
                                  Next
                                  <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none"  data-hs-stepper-finish-btn style="display: none;">
                                  Finish
                                </button>
                                <button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
                                  Reset
                                </button>
                              </div>
                            </div>
                            
                          </div>

Active step

Highlight the current step with an explicit active state.

<div class="mt-5 sm:mt-8">
                              
                              <div data-hs-stepper-content-item='{
                                "index": 1,
                                "isCompleted": true
                              }' class="success" style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    First content
                                  </h3>
                                </div>
                              </div>

<div data-hs-stepper-content-item='{
                                "index": 2
                              }' class="active">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Second content
                                  </h3>
                                </div>
                              </div>

<div data-hs-stepper='{
                            "currentIndex": 2
                          }'>
                            
                            <ul class="relative flex flex-row gap-x-2">
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group success" data-hs-stepper-nav-item='{
                                "index": 1,
                                "isCompleted": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary hs-stepper-completed:bg-teal-600"></div>
                              </li>

Error state

Show an error state when a step needs attention before the flow can continue.

<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group error" data-hs-stepper-nav-item='{
                              "index": 2,
                              "hasError": true
                            }'>
                              <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600 hs-stepper-error:bg-red-500 hs-stepper-active:text-foreground-inverse hs-stepper-success:text-primary-foreground hs-stepper-processed:bg-layer hs-stepper-processed:border hs-stepper-processed:border-layer-line">
                                  <span class="hs-stepper-success:hidden hs-stepper-completed:hidden hs-stepper-error:hidden hs-stepper-processed:hidden">2</span>
                                  <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  <svg class="hidden shrink-0 size-3 hs-stepper-error:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                  <span class="hidden animate-spin size-4 border-3 border-current border-t-transparent text-primary rounded-[999px] hs-stepper-processed:inline-block" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                  </span>
                                </span>
                                <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                  Step
                                </span>
                              </span>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                            </li>

<li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                              "index": 3
                            }'>
                              <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600 hs-stepper-error:bg-red-500 hs-stepper-active:text-foreground-inverse hs-stepper-success:text-primary-foreground hs-stepper-processed:bg-layer hs-stepper-processed:border hs-stepper-processed:border-layer-line">
                                  <span class="hs-stepper-success:hidden hs-stepper-completed:hidden hs-stepper-error:hidden hs-stepper-processed:hidden">3</span>
                                  <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  <svg class="hidden shrink-0 size-3 hs-stepper-error:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                  <span class="hidden animate-spin size-4 border-3 border-current border-t-transparent text-primary rounded-[999px] hs-stepper-processed:inline-block" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                  </span>
                                </span>
                                <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                  Step
                                </span>
                              </span>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                            </li>
                            
                          </ul>

<div class="mt-5 sm:mt-8">
                            
                            <div data-hs-stepper-content-item='{
                              "index": 1,
                              "isCompleted": true
                            }' style="display: none;">
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  First content
                                </h3>
                              </div>
                            </div>

<div data-hs-stepper-content-item='{
                              "index": 2
                            }'>
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  Second content
                                </h3>
                              </div>
                            </div>

<div data-hs-stepper-content-item='{
                              "index": 3
                            }' style="display: none;">
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  Third content
                                </h3>
                              </div>
                            </div>
                            
    
                            
                            <div data-hs-stepper-content-item='{
                              "isFinal": true
                            }' style="display: none;">
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  Final content
                                </h3>
                              </div>
                            </div>

<div class="mt-5 flex justify-between items-center gap-x-2">
                              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
                                <svg class="shrink-0 size-4" 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"><path d="m15 18-6-6 6-6"/></svg>
                                Back
                              </button>
                              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
                                Next
                                <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none"  data-hs-stepper-finish-btn style="display: none;">
                                Finish
                              </button>
                              <button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
                                Reset
                              </button>
                            </div>
                          </div>
                          
                        </div>
                        
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              (function () {
                                window.addEventListener('load', () => {
                                  const errorStepper = HSStepper.getInstance('#error-stepper');
                                  let errorSuccessState = 1;
      
                                  errorStepper.on('beforeNext', (ind) => {
                                    if (ind === 2) {
                                      errorStepper.setProcessedNavItem(ind);
      
                                      setTimeout(() => {
                                        errorStepper.unsetProcessedNavItem(ind);
                                        errorStepper.enableButtons();
      
                                        if (errorSuccessState) {
                                          errorStepper.goToNext();
                                        } else {
                                          errorStepper.setErrorNavItem(ind);
                                        }
      
                                        errorSuccessState = !errorSuccessState;
                                      }, 2000);
                                    }
                                  });
                                });
                              })();
                            </script>
                          </body>
                        </html>

<div id="error-stepper" data-hs-stepper='{
                          "currentIndex": 2
                        }'>
                          
                          <ul class="relative flex flex-row gap-x-2">
                            
                            <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group success" data-hs-stepper-nav-item='{
                              "index": 1,
                              "isCompleted": true
                            }'>
                              <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600 hs-stepper-error:bg-red-500 hs-stepper-active:text-foreground-inverse hs-stepper-success:text-primary-foreground hs-stepper-processed:bg-layer hs-stepper-processed:border hs-stepper-processed:border-layer-line">
                                  <span class="hs-stepper-success:hidden hs-stepper-completed:hidden hs-stepper-error:hidden hs-stepper-processed:hidden">1</span>
                                  <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  <svg class="hidden shrink-0 size-3 hs-stepper-error:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                  <span class="hidden animate-spin size-4 border-3 border-current border-t-transparent text-primary rounded-[999px] hs-stepper-processed:inline-block" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                  </span>
                                </span>
                                <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                  Step
                                </span>
                              </span>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                            </li>

Success state

Show a success state when a completed step should feel confirmed.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-2xl mx-auto mt-4 space-y-4">
                          <div data-hs-stepper='{
                            "isCompleted": true
                          }' class="completed">
                            
                            <ul class="relative flex flex-row gap-x-2">
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group success" data-hs-stepper-nav-item='{
                                "index": 1,
                                "isCompleted": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group success" data-hs-stepper-nav-item='{
                                "index": 2,
                                "isCompleted": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group active success" data-hs-stepper-nav-item='{
                                "index": 3,
                                "isCompleted": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
                            </ul>
                            
  
                            
                            <div class="mt-5 sm:mt-8">
                              
                              <div data-hs-stepper-content-item='{
                                "index": 1,
                                "isCompleted": true
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    First content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 2,
                                "isCompleted": true
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Second content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 3,
                                "isCompleted": true
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Third content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "isFinal": true
                              }'>
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Final content
                                  </h3>
                                </div>
                              </div>
                              
    
                              <div class="mt-5 flex justify-between items-center gap-x-2">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn style="display: none;">
                                  <svg class="shrink-0 size-4" 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"><path d="m15 18-6-6 6-6"/></svg>
                                  Back
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn style="display: none;">
                                  Next
                                  <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none"  data-hs-stepper-finish-btn style="display: none;">
                                  Finish
                                </button>
                                <button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn>
                                  Reset
                                </button>
                              </div>
                            </div>
                            
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div data-hs-stepper='{
                            "isCompleted": true
                          }' class="completed">
                            
                            <ul class="relative flex flex-row gap-x-2">
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group success" data-hs-stepper-nav-item='{
                                "index": 1,
                                "isCompleted": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group success" data-hs-stepper-nav-item='{
                                "index": 2,
                                "isCompleted": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">2</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
    
                              
                              <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group active success" data-hs-stepper-nav-item='{
                                "index": 3,
                                "isCompleted": true
                              }'>
                                <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                    <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">3</span>
                                    <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                  </span>
                                  <span class="ms-2 text-sm font-medium text-foreground group-focus:text-muted-foreground-1">
                                    Step
                                  </span>
                                </span>
                                <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary-active hs-stepper-completed:bg-teal-600"></div>
                              </li>
                              
                            </ul>
                            
  
                            
                            <div class="mt-5 sm:mt-8">
                              
                              <div data-hs-stepper-content-item='{
                                "index": 1,
                                "isCompleted": true
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    First content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 2,
                                "isCompleted": true
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Second content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "index": 3,
                                "isCompleted": true
                              }' style="display: none;">
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Third content
                                  </h3>
                                </div>
                              </div>
                              
    
                              
                              <div data-hs-stepper-content-item='{
                                "isFinal": true
                              }'>
                                <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                  <h3 class="text-muted-foreground-1">
                                    Final content
                                  </h3>
                                </div>
                              </div>
                              
    
                              <div class="mt-5 flex justify-between items-center gap-x-2">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn style="display: none;">
                                  <svg class="shrink-0 size-4" 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"><path d="m15 18-6-6 6-6"/></svg>
                                  Back
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn style="display: none;">
                                  Next
                                  <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                                </button>
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none"  data-hs-stepper-finish-btn style="display: none;">
                                  Finish
                                </button>
                                <button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn>
                                  Reset
                                </button>
                              </div>
                            </div>
                            
                          </div>

Destroy and reinitialize

Use the destroy method to remove an initialized stepper before rebuilding or reinitializing it.

<div class="mt-5 sm:mt-8">
                            
                            <div data-hs-stepper-content-item='{
                              "index": 1
                            }'>
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  First content
                                </h3>
                              </div>
                            </div>

<div data-hs-stepper-content-item='{
                              "index": 2
                            }' style="display: none;">
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  Second content
                                </h3>
                              </div>
                            </div>

<div data-hs-stepper-content-item='{
                              "index": 3
                            }' style="display: none;">
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  Third content
                                </h3>
                              </div>
                            </div>

<div data-hs-stepper-content-item='{
                              "isFinal": true
                            }' style="display: none;">
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  Final content
                                </h3>
                              </div>
                            </div>

<div class="mt-5 flex justify-between items-center gap-x-2">
                              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
                                <svg class="shrink-0 size-4" 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"><path d="m15 18-6-6 6-6"/></svg>
                                Back
                              </button>
                              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
                                Next
                                <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none"  data-hs-stepper-finish-btn style="display: none;">
                                Finish
                              </button>
                              <button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
                                Reset
                              </button>
                            </div>
                            
                          </div>
                          
                        </div>

<div class="flex flex-wrap gap-2 mt-4">
                          <button type="button" id="hs-destroy-stepper" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" 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"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                            Destroy stepper
                          </button>
                          <button type="button" id="hs-auto-init-stepper" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                            <svg class="shrink-0 size-3.5" 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"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
                            Reinitialize stepper
                          </button>
                        </div>
                        
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function() {
                                  const stepper = document.querySelector('#hs-stepper-to-destroy');
                                  const destroy = document.querySelector('#hs-destroy-stepper');
                                  const autoInit = document.querySelector('#hs-auto-init-stepper');

destroy.addEventListener('click', () => {
                                    const {element} = HSStepper.getInstance(stepper, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                    autoInit.removeAttribute('disabled');
                                  });

autoInit.addEventListener('click', () => {
                                    HSStepper.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                    destroy.removeAttribute('disabled');
                                  });
                                })();
                              });
                            </script>
                          </body>
                        </html>

<div id="hs-stepper-to-destroy" data-hs-stepper>
                          
                          <ul class="relative flex flex-row gap-x-2">
                            <li class="flex items-center gap-x-2 shrink basis-0 flex-1 group" data-hs-stepper-nav-item='{
                              "index": 1
                            }'>
                              <span class="min-w-7 min-h-7 group inline-flex items-center text-xs align-middle">
                                <span class="size-7 flex justify-center items-center shrink-0 bg-surface font-medium text-surface-foreground rounded-full group-focus:bg-surface-focus hs-stepper-active:bg-primary-active hs-stepper-active:text-primary-foreground hs-stepper-success:bg-primary-active hs-stepper-success:text-primary-foreground hs-stepper-completed:bg-teal-500 hs-stepper-completed:group-focus:bg-teal-600">
                                  <span class="hs-stepper-success:hidden hs-stepper-completed:hidden">1</span>
                                  <svg class="hidden shrink-0 size-3 hs-stepper-success:block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                </span>
                                <span class="ms-2 text-sm font-medium text-foreground">
                                  Step
                                </span>
                              </span>
                              <div class="w-full h-px flex-1 bg-surface-1 group-last:hidden hs-stepper-success:bg-primary hs-stepper-completed:bg-teal-600"></div>
                            </li>

<div class="mt-5 sm:mt-8">
                            
                            <div data-hs-stepper-content-item='{
                              "index": 1
                            }'>
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  First content
                                </h3>
                              </div>
                            </div>

<div data-hs-stepper-content-item='{
                              "index": 2
                            }' style="display: none;">
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  Second content
                                </h3>
                              </div>
                            </div>

<div data-hs-stepper-content-item='{
                              "index": 3
                            }' style="display: none;">
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  Third content
                                </h3>
                              </div>
                            </div>

<div data-hs-stepper-content-item='{
                              "isFinal": true
                            }' style="display: none;">
                              <div class="p-4 h-48 bg-muted flex justify-center items-center border border-dashed border-line-2 rounded-xl">
                                <h3 class="text-muted-foreground-1">
                                  Final content
                                </h3>
                              </div>
                            </div>

<div class="mt-5 flex justify-between items-center gap-x-2">
                              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-back-btn>
                                <svg class="shrink-0 size-4" 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"><path d="m15 18-6-6 6-6"/></svg>
                                Back
                              </button>
                              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-next-btn>
                                Next
                                <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none"  data-hs-stepper-finish-btn style="display: none;">
                                Finish
                              </button>
                              <button type="reset" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-stepper-reset-btn style="display: none;">
                                Reset
                              </button>
                            </div>
                            
                          </div>
                          
                        </div>

destroy.addEventListener('click', () => {
                                const {element} = HSStepper.getInstance(stepper, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                autoInit.removeAttribute('disabled');
                              });

autoInit.addEventListener('click', () => {
                                HSStepper.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                destroy.removeAttribute('disabled');
                              });
                            })();
                          });
                        </script>