Components

Tailwind Css Stipper

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.

Static

Copied!
  • 1
    Step
  • 2
    Step
  • 3
    Step 
        
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2">
  <!-- Item -->
  <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 flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        1
      </span>
      <div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
    </div>
    <div class="mt-3">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        2
      </span>
      <div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
    </div>
    <div class="mt-3">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        3
      </span>
      <div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
    </div>
    <div class="mt-3">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
  </li>
  <!-- End Item -->
</ul>
<!-- End Stepper -->

Linear

Copied!
  • 1 Step
  • 2 Step
  • 3 Step 
        
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2">
  <!-- Item -->
  <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 flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        1
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        2
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        3
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->
</ul>
<!-- End Stepper -->

Responsive

Copied!
  • 1
    Step

    This is a description text.

  • 2
    Step

    This is a description text.

  • 3
    Step

    This is a description text. 

        
<!-- Stepper -->
<ul class="relative flex flex-col md:flex-row gap-2">
  <!-- Item -->
  <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
    <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
      <span class="size-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        1
      </span>
      <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
    </div>
    <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
      <p class="text-sm text-gray-500">
        This is a description text.
      </p>
    </div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
    <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
      <span class="size-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        2
      </span>
      <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
    </div>
    <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
      <p class="text-sm text-gray-500">
        This is a description text.
      </p>
    </div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
    <div class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
      <span class="size-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        3
      </span>
      <div class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
    </div>
    <div class="grow md:grow-0 md:mt-3 pb-5">
      <span class="block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
      <p class="text-sm text-gray-500">
        This is a description text.
      </p>
    </div>
  </li>
  <!-- End Item -->
</ul>
<!-- End Stepper -->

Linear example

Copied!
  • 1 Step
  • 2 Step
  • 3 Step 
        
<!-- Stepper -->
<ul class="relative flex flex-col md:flex-row gap-2">
  <!-- Item -->
  <li class="flex flex-col md:flex-row md: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 md:grow-0">
      <span class="size-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        1
      </span>
      <span class="ms-2 block grow md:grow-0 text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="mt-2 w-px h-4 md:mt-0 ms-3.5 md:ms-0 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <li class="flex flex-col md:flex-row md: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 md:grow-0">
      <span class="size-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        2
      </span>
      <span class="ms-2 block grow md:grow-0 text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="mt-2 w-px h-4 md:mt-0 ms-3.5 md:ms-0 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <li class="flex flex-col md:flex-row md: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 md:grow-0">
      <span class="size-7 flex justify-center items-center flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        3
      </span>
      <span class="ms-2 block grow md:grow-0 text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="mt-2 w-px h-4 md:mt-0 ms-3.5 md:ms-0 md:w-full md:h-px md:flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->
</ul>
<!-- End Stepper -->

White

Copied!
  • 1 Step
  • 2 Step
  • 3 Step 
        
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2">
  <!-- Item -->
  <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 flex-shrink-0 bg-white border border-gray-200 font-medium text-gray-800 rounded-full dark:bg-slate-900 dark:border-gray-700 dark:text-white">
        1
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-white border border-gray-200 font-medium text-gray-800 rounded-full dark:bg-slate-900 dark:border-gray-700 dark:text-white">
        2
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-white border border-gray-200 font-medium text-gray-800 rounded-full dark:bg-slate-900 dark:border-gray-700 dark:text-white">
        3
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->
</ul>
<!-- End Stepper -->

Solid

Copied!
  • 1 Step
  • 2 Step
  • 3 Step 
        
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2">
  <!-- Item -->
  <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 flex-shrink-0 bg-gray-800 font-medium text-white rounded-full dark:bg-white dark:text-gray-800">
        1
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-gray-800 font-medium text-white rounded-full dark:bg-white dark:text-gray-800">
        2
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-gray-800 font-medium text-white rounded-full dark:bg-white dark:text-gray-800">
        3
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->
</ul>
<!-- End Stepper -->

Center

Copied!
  • 1
  • 2
  • 3 
        
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2 max-w-xs mx-auto">
  <!-- Item -->
  <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 flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        1
      </span>
      <div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
    </div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        2
      </span>
      <div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
    </div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-gray-100 font-medium text-gray-800 rounded-full dark:bg-gray-700 dark:text-white">
        3
      </span>
      <div class="ms-2 w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
    </div>
  </li>
  <!-- End Item -->
</ul>
<!-- End Stepper -->

Working with icon and avatar

Copied!
  • Image Description Step
  • Step
  • Loading... Step 
        
<!-- Stepper -->
<ul class="relative flex flex-row gap-x-2">
  <!-- Item -->
  <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="flex-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="Image Description">
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-white border border-gray-200 font-medium text-gray-800 rounded-full dark:bg-slate-900 dark:border-gray-700 dark:text-white">
        <svg class="flex-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>
          <path d="M8 3H3v5"></path>
          <path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"></path>
          <path d="m15 9 6-6"></path>
        </svg>
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->

  <!-- Item -->
  <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 flex-shrink-0 bg-white border border-gray-200 font-medium text-gray-800 rounded-full dark:bg-slate-900 dark:border-gray-700 dark:text-white">
        <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-blue-600 rounded-full dark:text-blue-500" role="status" aria-label="loading">
          <span class="sr-only">Loading...</span>
        </span>
      </span>
      <span class="ms-2 block text-sm font-medium text-gray-800 dark:text-white">
        Step
      </span>
    </div>
    <div class="w-full h-px flex-1 bg-gray-200 group-last:hidden dark:bg-gray-700"></div>
  </li>
  <!-- End Item -->
</ul>
<!-- End Stepper -->

On this page