Skip to content
HyperUI

No results found.

Back to application components

Steps

Step indicator components for onboarding, progress tracking, and multi-step forms in web applications.

5/5 Dark Mode Updated: Jul 4, 2026

Title, icon and progress bar

markmead

<div>
  <h2 class="sr-only">Steps</h2>

  <div>
    <div class="overflow-hidden rounded-full bg-gray-200">
      <div class="h-2 w-1/2 rounded-full bg-blue-500"></div>
    </div>

    <ol class="mt-4 grid grid-cols-3 text-sm font-medium text-gray-600">
      <li class="flex items-center justify-start text-blue-500 sm:gap-1.5">
        <span class="sr-only sm:not-sr-only sm:inline"> Details </span>

        <svg
          aria-hidden="true"
          class="size-6 sm:size-5"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
          />
        </svg>
      </li>

      <li class="flex items-center justify-center text-blue-500 sm:gap-1.5">
        <span class="sr-only sm:not-sr-only sm:inline"> Address </span>

        <svg
          aria-hidden="true"
          class="size-6 sm:size-5"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
          />
        </svg>
      </li>

      <li class="flex items-center justify-end sm:gap-1.5">
        <span class="sr-only sm:not-sr-only sm:inline"> Payment </span>

        <svg
          aria-hidden="true"
          class="size-6 sm:size-5"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
          />
        </svg>
      </li>
    </ol>
  </div>
</div>

Title, icon and progress bar (Dark)

WinnyChang

<div>
  <h2 class="sr-only">Steps</h2>

  <div>
    <div class="overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
      <div class="h-2 w-1/2 rounded-full bg-blue-500"></div>
    </div>

    <ol class="mt-4 grid grid-cols-3 text-sm font-medium text-gray-600 dark:text-gray-300">
      <li class="flex items-center justify-start text-blue-500 sm:gap-1.5">
        <span class="sr-only sm:not-sr-only sm:inline"> Details </span>

        <svg
          aria-hidden="true"
          class="size-6 sm:size-5"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
          />
        </svg>
      </li>

      <li class="flex items-center justify-center text-blue-500 sm:gap-1.5">
        <span class="sr-only sm:not-sr-only sm:inline"> Address </span>

        <svg
          aria-hidden="true"
          class="size-6 sm:size-5"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
          />
        </svg>
      </li>

      <li class="flex items-center justify-end sm:gap-1.5">
        <span class="sr-only sm:not-sr-only sm:inline"> Payment </span>

        <svg
          aria-hidden="true"
          class="size-6 sm:size-5"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
          />
        </svg>
      </li>
    </ol>
  </div>
</div>

Title, step/total and progress bar

markmead

<div>
  <h2 class="sr-only">Steps</h2>

  <div>
    <p class="text-xs font-medium text-gray-600">2/3 - Address</p>

    <div class="mt-2 overflow-hidden rounded-full bg-gray-200">
      <div class="h-2 w-2/3 rounded-full bg-blue-500"></div>
    </div>
  </div>
</div>

Title, step/total and progress bar (Dark)

WinnyChang

<div>
  <h2 class="sr-only">Steps</h2>

  <div>
    <p class="text-xs font-medium text-gray-600 dark:text-gray-300">2/3 - Address</p>

    <div class="mt-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
      <div class="h-2 w-2/3 rounded-full bg-blue-500"></div>
    </div>
  </div>
</div>

Title, check icon and progress bar

markmead

<div>
  <h2 class="sr-only">Steps</h2>

  <div class="after:mt-4 after:block after:h-1 after:w-full after:rounded-lg after:bg-gray-200">
    <ol class="grid grid-cols-3 text-sm font-medium text-gray-600">
      <li class="relative flex justify-start text-blue-500">
        <span class="absolute start-0 -bottom-7 rounded-full bg-blue-500 text-white">
          <svg
            aria-hidden="true"
            class="size-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
              clip-rule="evenodd"
            />
          </svg>
        </span>

        <span class="sr-only sm:not-sr-only sm:block"> Details </span>

        <svg
          aria-hidden="true"
          class="size-6 sm:hidden"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
          />
        </svg>
      </li>

      <li class="relative flex justify-center text-blue-500">
        <span
          class="absolute -bottom-7 left-1/2 -translate-x-1/2 rounded-full bg-blue-500 text-white"
        >
          <svg
            aria-hidden="true"
            class="size-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
              clip-rule="evenodd"
            />
          </svg>
        </span>

        <span class="sr-only sm:not-sr-only sm:block"> Address </span>

        <svg
          aria-hidden="true"
          class="mx-auto size-6 sm:hidden"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
          />
        </svg>
      </li>

      <li class="relative flex justify-end">
        <span class="absolute end-0 -bottom-7 rounded-full bg-gray-500 text-white">
          <svg
            aria-hidden="true"
            class="size-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
              clip-rule="evenodd"
            />
          </svg>
        </span>

        <span class="sr-only sm:not-sr-only sm:block"> Payment </span>

        <svg
          aria-hidden="true"
          class="size-6 sm:hidden"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
          />
        </svg>
      </li>
    </ol>
  </div>
</div>

Title, check icon and progress bar (Dark)

WinnyChang

<div>
  <h2 class="sr-only">Steps</h2>

  <div
    class="after:mt-4 after:block after:h-1 after:w-full after:rounded-lg after:bg-gray-200 dark:after:bg-gray-700"
  >
    <ol class="grid grid-cols-3 text-sm font-medium text-gray-600 dark:text-gray-300">
      <li class="relative flex justify-start text-blue-500">
        <span
          class="absolute start-0 -bottom-7 rounded-full bg-blue-500 text-white dark:text-gray-900"
        >
          <svg
            aria-hidden="true"
            class="size-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
              clip-rule="evenodd"
            />
          </svg>
        </span>

        <span class="sr-only sm:not-sr-only sm:block"> Details </span>

        <svg
          aria-hidden="true"
          class="size-6 sm:hidden"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
          />
        </svg>
      </li>

      <li class="relative flex justify-center text-blue-500">
        <span
          class="absolute -bottom-7 left-1/2 -translate-x-1/2 rounded-full bg-blue-500 text-white dark:text-gray-900"
        >
          <svg
            aria-hidden="true"
            class="size-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
              clip-rule="evenodd"
            />
          </svg>
        </span>

        <span class="sr-only sm:not-sr-only sm:block"> Address </span>

        <svg
          aria-hidden="true"
          class="mx-auto size-6 sm:hidden"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
          />
        </svg>
      </li>

      <li class="relative flex justify-end">
        <span
          class="absolute end-0 -bottom-7 rounded-full bg-gray-500 text-white dark:bg-gray-400 dark:text-gray-900"
        >
          <svg
            aria-hidden="true"
            class="size-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
              clip-rule="evenodd"
            />
          </svg>
        </span>

        <span class="sr-only sm:not-sr-only sm:block"> Payment </span>

        <svg
          aria-hidden="true"
          class="size-6 sm:hidden"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
          />
        </svg>
      </li>
    </ol>
  </div>
</div>

Grouped with title and description, with highlighted current step

markmead

<div>
  <h2 class="sr-only">Steps</h2>

  <div>
    <ol
      class="grid grid-cols-1 divide-x divide-gray-100 overflow-hidden rounded-lg border border-gray-100 text-sm text-gray-600 sm:grid-cols-3"
    >
      <li class="flex items-center justify-center gap-2 p-4">
        <svg
          aria-hidden="true"
          class="size-7 shrink-0"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
          />
        </svg>

        <p class="leading-none">
          <strong class="block font-medium text-gray-900"> Details </strong>

          <small class="mt-1"> Some info about you. </small>
        </p>
      </li>

      <li class="relative flex items-center justify-center gap-2 bg-gray-50 p-4">
        <span
          class="absolute top-1/2 -left-2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-s-0 ltr:border-b-0 ltr:bg-white rtl:border-e-0 rtl:border-t-0 rtl:bg-gray-50"
        >
        </span>

        <span
          class="absolute top-1/2 -right-2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-s-0 ltr:border-b-0 ltr:bg-gray-50 rtl:border-e-0 rtl:border-t-0 rtl:bg-white"
        >
        </span>

        <svg
          aria-hidden="true"
          class="size-7 shrink-0"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
          />
        </svg>

        <p class="leading-none">
          <strong class="block font-medium text-gray-900"> Address </strong>

          <small class="mt-1"> Where we sending it? </small>
        </p>
      </li>

      <li class="flex items-center justify-center gap-2 p-4">
        <svg
          aria-hidden="true"
          class="size-7 shrink-0"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
          />
        </svg>

        <p class="leading-none">
          <strong class="block font-medium text-gray-900"> Payment </strong>

          <small class="mt-1"> Show us the money. </small>
        </p>
      </li>
    </ol>
  </div>
</div>

Grouped with title and description, with highlighted current step (Dark)

WinnyChang

<div>
  <h2 class="sr-only">Steps</h2>

  <div>
    <ol
      class="grid grid-cols-1 divide-x divide-gray-100 overflow-hidden rounded-lg border border-gray-100 text-sm text-gray-600 sm:grid-cols-3 dark:divide-gray-700 dark:border-gray-700 dark:text-gray-300"
    >
      <li class="flex items-center justify-center gap-2 p-4">
        <svg
          aria-hidden="true"
          class="size-7 shrink-0"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
          />
        </svg>

        <p class="leading-none">
          <strong class="block font-medium text-gray-900 dark:text-white"> Details </strong>

          <small class="mt-1"> Some info about you. </small>
        </p>
      </li>

      <li
        class="relative flex items-center justify-center gap-2 bg-gray-50 p-4 dark:bg-gray-800"
      >
        <span
          class="absolute top-1/2 -left-2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-s-0 ltr:border-b-0 ltr:bg-white rtl:border-e-0 rtl:border-t-0 rtl:bg-gray-50 dark:border-gray-700 dark:ltr:bg-gray-900 dark:rtl:bg-gray-800"
        >
        </span>

        <span
          class="absolute top-1/2 -right-2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-s-0 ltr:border-b-0 ltr:bg-gray-50 rtl:border-e-0 rtl:border-t-0 rtl:bg-white dark:border-gray-700 dark:ltr:bg-gray-800 dark:rtl:bg-gray-900"
        >
        </span>

        <svg
          aria-hidden="true"
          class="size-7 shrink-0"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
          />
        </svg>

        <p class="leading-none">
          <strong class="block font-medium text-gray-900 dark:text-white"> Address </strong>

          <small class="mt-1"> Where we sending it? </small>
        </p>
      </li>

      <li class="flex items-center justify-center gap-2 p-4">
        <svg
          aria-hidden="true"
          class="size-7 shrink-0"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
          />
        </svg>

        <p class="leading-none">
          <strong class="block font-medium text-gray-900 dark:text-white"> Payment </strong>

          <small class="mt-1"> Show us the money. </small>
        </p>
      </li>
    </ol>
  </div>
</div>

Timeline with title, with highlighted current step

markmead

<div>
  <h2 class="sr-only">Steps</h2>

  <div
    class="relative after:absolute after:inset-x-0 after:top-1/2 after:block after:h-0.5 after:-translate-y-1/2 after:rounded-lg after:bg-gray-200"
  >
    <ol class="relative z-10 flex justify-between text-sm font-medium text-gray-600">
      <li class="flex items-center gap-2 bg-white p-2">
        <span class="size-6 rounded-full bg-gray-100 text-center text-[10px]/6 font-bold">
          1
        </span>

        <span class="hidden sm:block"> Details </span>
      </li>

      <li class="flex items-center gap-2 bg-white p-2">
        <span
          class="size-6 rounded-full bg-blue-500 text-center text-[10px]/6 font-bold text-white"
        >
          2
        </span>

        <span class="hidden sm:block"> Address </span>
      </li>

      <li class="flex items-center gap-2 bg-white p-2">
        <span class="size-6 rounded-full bg-gray-100 text-center text-[10px]/6 font-bold">
          3
        </span>

        <span class="hidden sm:block"> Payment </span>
      </li>
    </ol>
  </div>
</div>

Timeline with title, with highlighted current step (Dark)

WinnyChang

<div>
  <h2 class="sr-only">Steps</h2>

  <div
    class="relative after:absolute after:inset-x-0 after:top-1/2 after:block after:h-0.5 after:-translate-y-1/2 after:rounded-lg after:bg-gray-200 dark:after:bg-gray-700"
  >
    <ol
      class="relative z-10 flex justify-between text-sm font-medium text-gray-600 dark:text-gray-300"
    >
      <li class="flex items-center gap-2 bg-white p-2 dark:bg-gray-900">
        <span
          class="size-6 rounded-full bg-gray-100 text-center text-[10px]/6 font-bold dark:bg-gray-800"
        >
          1
        </span>

        <span class="hidden sm:block"> Details </span>
      </li>

      <li class="flex items-center gap-2 bg-white p-2 dark:bg-gray-900">
        <span
          class="size-6 rounded-full bg-blue-500 text-center text-[10px]/6 font-bold text-white"
        >
          2
        </span>

        <span class="hidden sm:block"> Address </span>
      </li>

      <li class="flex items-center gap-2 bg-white p-2 dark:bg-gray-900">
        <span
          class="size-6 rounded-full bg-gray-100 text-center text-[10px]/6 font-bold dark:bg-gray-800"
        >
          3
        </span>

        <span class="hidden sm:block"> Payment </span>
      </li>
    </ol>
  </div>
</div>

Related components

View all application components