Components
Stepper

Components

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

Static

A static stepper usage.

Theme:

<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.0.1"></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>

Linear

Linear stepper example.

Theme:

<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.0.1"></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>

Responsive

This stepper example is horizontally aligned above md resolution and vertically below.

Reduce browser size to see it in action

Theme:

<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.0.1"></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>

Linear example is also horizontally aligned above md resolution and vertically below.

Reduce browser size to see it in action

Theme:

<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.0.1"></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>

Types

White

White stepper example.

Theme:

<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.0.1"></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>

Solid

Solid stepper example.

Theme:

<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.0.1"></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>

Alignment

Center

Center aligned stepper.

Theme:

<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.0.1"></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>

Working with icon and avatar

You can also add additional elements, such as an avatar image or icons.

Theme:

<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.0.1"></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

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

A dynamic stepper example that guides users through the steps of a task.

Theme:

<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.0.1"></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>

Non-linear

With a "Complete Step" button.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" 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.0.1"></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>

Skipped

A skip button step example.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" 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.0.1"></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

Active stepper example.

Theme:

<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

Error stepper example.

Theme:

<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.0.1"></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

Success stepper example.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" 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.0.1"></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

Provides destroy method that helps to destroy a stepper.

Theme:

<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.0.1"></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>