# Tabs

Tabs organize content across different screens, data sets, and other interactions.

## Primary tabs

Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations. You have to add `.active` classes to show tab components. Use javascript or your favorite framework to add classes.

### Tabs content 1

### Tabs content 2

### Tabs content 3

    <!-- tabs -->
    <div class="tabs flex flex-col w-full sm:w-[360px]">
      <!-- tabs header -->
      <div class="relative flex flex-row items-center">
        <button data-type="tabs" data-target="#tab-1" class="active w-1/3 sm:w-[120px] h-16 px-4 py-2 flex flex-col justify-end items-center gap-1 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
          <span class="material-symbols-outlined">music_note</span>
          <span class="text-sm tracking-[.00714em]">Music</span>
        </button>
        <button data-type="tabs" data-target="#tab-2" class="w-1/3 sm:w-[120px] h-16 px-4 py-2 flex flex-col justify-end items-center gap-1 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
          <span class="material-symbols-outlined">image</span>
          <span class="text-sm tracking-[.00714em]">Photos</span>
        </button>
        <button data-type="tabs" data-target="#tab-3" class="w-1/3 sm:w-[120px] h-16 px-4 py-2 flex flex-col justify-end items-center gap-1 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
          <span class="material-symbols-outlined">videocam</span>
          <span class="text-sm tracking-[.00714em]">Video</span>
        </button>
        <!-- indicator -->
        <div data-type="indicator" class="absolute left-0 bottom-0 transition-all duration-200 ease-in-out bg-primary-600 dark:bg-primary-200 w-[40px] ml-[30px] sm:ml-[40px] h-0.5 rounded-t-full"></div>
      </div>
      <hr class="border-gray-200 dark:border-gray-700">
      <!-- tabs content -->
      <div class="flex flex-col">
        <div id="tab-1" role="tabpanel" class="active [&.active]:block hidden py-4 transition duration-400 ease-in-out">
          <h3>Tabs content 1</h3>
        </div>
        <div id="tab-2" role="tabpanel" class="[&.active]:block hidden py-4 transition duration-400 ease-in-out">
          <h3>Tabs content 2</h3>
        </div>
        <div id="tab-3" role="tabpanel" class="[&.active]:block hidden py-4 transition duration-400 ease-in-out">
          <h3>Tabs content 3</h3>
        </div>
      </div>
    </div>

## Secondary tabs

Secondary tabs are used within a content area to further separate related content and establish hierarchy.

### Tabs content 1

### Tabs content 2

### Tabs content 3

    <!-- tabs -->
    <div class="tabs flex flex-col w-full sm:w-[360px]">
      <!-- tabs header -->
      <div class="relative flex flex-row items-center">
        <button data-type="tabs" data-target="#tab-4" class="active w-1/3 sm:w-[120px] h-16 px-4 flex flex-col justify-end items-center gap-1 relative py-2 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
          <span class="material-symbols-outlined">music_note</span>
          <span class="text-sm tracking-[.00714em]">Music</span>
        </button>
        <button data-type="tabs" data-target="#tab-5" class="w-1/3 sm:w-[120px] h-16 px-4 flex flex-col justify-end items-center gap-1 relative py-2 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
          <span class="material-symbols-outlined">image</span>
          <span class="text-sm tracking-[.00714em]">Photos</span>
        </button>
        <button data-type="tabs" data-target="#tab-6" class="w-1/3 sm:w-[120px] h-16 px-4 flex flex-col justify-end items-center gap-1 relative py-2 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
          <span class="material-symbols-outlined">videocam</span>
          <span class="text-sm tracking-[.00714em]">Video</span>
        </button>
        <!-- indicator -->
        <div data-type="indicator" class="absolute left-0 bottom-0 transition-all duration-200 ease-in-out bg-primary-600 dark:bg-primary-200 w-1/3 sm:w-[120px] h-0.5 rounded-t-full"></div>
      </div>
      <hr class="border-gray-200 dark:border-gray-700">
      <!-- tabs content -->
      <div class="flex flex-col">
        <div id="tab-4" role="tabpanel" class="active [&.active]:block hidden py-4 transition duration-400 ease-in-out">
          <h3>Tabs content 1</h3>
        </div>
        <div id="tab-5" role="tabpanel" class="[&.active]:block hidden py-4 transition duration-400 ease-in-out">
          <h3>Tabs content 2</h3>
        </div>
        <div id="tab-6" role="tabpanel" class="[&.active]:block hidden py-4 transition duration-400 ease-in-out">
          <h3>Tabs content 3</h3>
        </div>
      </div>
    </div>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts