# Stepper

A stepper, in the context of user interfaces, is a graphical control element used to increment or decrement a value in a predetermined sequence.

    <!-- step horizontal -->
    <div class="relative flex flex-row justify-center gap-6">
      <!-- border -->
      <span class="top-6 sm:top-10 absolute w-full border-b-2 border-dashed border-surface-500 dark:border-surfacedark-500"></span>

      <button class="active [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-900 relative flex flex-col justify-center items-center text-center gap-1 w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-surface-100 dark:bg-surfacedark-100 border-2 border-surface-500 dark:border-surfacedark-500">
        <span class="material-symbols-outlined">person</span>
        <span class="text-label-md hidden sm:inline-flex">Billing</span>
      </button>
      <button class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-900 relative flex flex-col justify-center items-center text-center gap-1 w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-surface-100 dark:bg-surfacedark-100 border-2 border-surface-500 dark:border-surfacedark-500">
        <span class="material-symbols-outlined">local_shipping</span>
        <span class="text-label-md hidden sm:inline-flex">Shipping</span>
      </button>
      <button class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-900 relative flex flex-col justify-center items-center text-center gap-1 w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-surface-100 dark:bg-surfacedark-100 border-2 border-surface-500 dark:border-surfacedark-500">
        <span class="material-symbols-outlined">payment</span>
        <span class="text-label-md hidden sm:inline-flex">Payment</span>
      </button>
      <button class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-900 relative flex flex-col justify-center items-center text-center gap-1 w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-surface-100 dark:bg-surfacedark-100 border-2 border-surface-500 dark:border-surfacedark-500">
        <span class="material-symbols-outlined">visibility</span>
        <span class="text-label-md hidden sm:inline-flex">Preview</span>
      </button>
    </div>

## Timeline

- June 2023

  ### Content Review and Finalization

  Review and finalize website content, ensuring accuracy and consistency

- May 2023

  ### Testing and Quality Assurance

  Conduct thorough testing of the website, including functionality, performance, and security

- April 2023

  ### Website Development

  Develop the website using modern web technologies and frameworks

- March 2023

  ### Design and Content Creation

  Create content for the website, including text, images, and multimedia

- February 2023

  ### Project Planning and Research

  Create a project plan, including timelines, milestones, and resources

    <!-- timeline -->
    <ul class="relative border-l border-gray-200 dark:border-gray-700">
      <li class="mb-4 ml-4">
        <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
        <time datetime="2023-06-14 20:00" class="mb-1 text-label-sm text-gray-400 dark:text-gray-500">June 2023</time>
        <h3 class="tracking-wide font-semibold">Content Review and Finalization</h3>
        <p class="text-body-md text-gray-500">Review and finalize website content, ensuring accuracy and consistency</p>
      </li>
      <li class="mb-4 ml-4">
        <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
        <time datetime="2023-05-14 20:00" class="mb-1 text-label-sm text-gray-400 dark:text-gray-500">May 2023</time>
        <h3 class="tracking-wide font-semibold">Testing and Quality Assurance</h3>
        <p class="text-body-md text-gray-500">Conduct thorough testing of the website, including functionality, performance, and security</p>
      </li>
      <li class="mb-4 ml-4">
        <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
        <time datetime="2023-04-14 20:00" class="mb-1 text-label-sm text-gray-400 dark:text-gray-500">April 2023</time>
        <h3 class="tracking-wide font-semibold">Website Development</h3>
        <p class="text-body-md text-gray-500">Develop the website using modern web technologies and frameworks</p>
      </li>
      <li class="mb-4 ml-4">
        <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
        <time datetime="2023-03-14 20:00" class="mb-1 text-label-sm text-gray-400 dark:text-gray-500">March 2023</time>
        <h3 class="tracking-wide font-semibold">Design and Content Creation</h3>
        <p class="text-body-md text-gray-500">Create content for the website, including text, images, and multimedia</p>
      </li>
      <li class="mb-4 ml-4">
        <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
        <time datetime="2023-02-14 20:00" class="mb-1 text-label-sm text-gray-400 dark:text-gray-500">February 2023</time>
        <h3 class="tracking-wide font-semibold">Project Planning and Research</h3>
        <p class="text-body-md text-gray-500">Create a project plan, including timelines, milestones, and resources</p>
      </li>
    </ul>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts