Tabs

Tabs can be used to show a list of links in a tabbed format.

This page is not up to date. Some of the examples might not work as expected.
Class name		Type
tabs
Component
Container of multiple tab items
tab
Part
A single tab button (can be button, link, div, radio input, etc)
tab-content
Part
Tab content that comes immediately after a tab
tabs-box
Style
box style
tabs-border
Style
bottom border style
tabs-lift
Style
lift style
tab-active
Modifier
Makes a single tab look active
tab-disabled
Modifier
Makes a single tab look disabled
tabs-top
Placement
Puts tab buttons on top of the tab-content (defult)
tab-bottom
Placement
Puts tabs on under the tab-content
tabs-xs
Size
Extra small size
tabs-sm
Size
Small size
tabs-md
Size
Medium size (default)
tabs-lg
Size
Large size
tabs-xl
Size
Extra large size

Tabs

<div role="tablist" class="$$tabs">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>

Bordered

<div role="tablist" class="$$tabs $$tabs-bordered">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-bordered">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>

Lifted

<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>

Boxed

<div role="tablist" class="$$tabs $$tabs-boxed">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-boxed">
  <a role="tab" class="$$tab">Tab 1</a>
  <a role="tab" class="$$tab $$tab-active">Tab 2</a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>

Sizes

<!-- xs -->
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xs">
  <a role="tab" class="$$tab">Tiny</a>
  <a role="tab" class="$$tab $$tab-active">Tiny</a>
  <a role="tab" class="$$tab">Tiny</a>
</div>
<!-- sm -->
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-sm">
  <a role="tab" class="$$tab">Small</a>
  <a role="tab" class="$$tab $$tab-active">Small</a>
  <a role="tab" class="$$tab">Small</a>
</div>
<!-- md -->
<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Normal</a>
  <a role="tab" class="$$tab $$tab-active">Normal</a>
  <a role="tab" class="$$tab">Normal</a>
</div>
<!-- lg -->
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-lg">
  <a role="tab" class="$$tab">Large</a>
  <a role="tab" class="$$tab $$tab-active">Large</a>
  <a role="tab" class="$$tab">Large</a>
</div>
<!-- xs -->
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xs">
  <a role="tab" class="$$tab">Tiny</a>
  <a role="tab" class="$$tab $$tab-active">Tiny</a>
  <a role="tab" class="$$tab">Tiny</a>
</div>
<!-- sm -->
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-sm">
  <a role="tab" class="$$tab">Small</a>
  <a role="tab" class="$$tab $$tab-active">Small</a>
  <a role="tab" class="$$tab">Small</a>
</div>
<!-- md -->
<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Normal</a>
  <a role="tab" class="$$tab $$tab-active">Normal</a>
  <a role="tab" class="$$tab">Normal</a>
</div>
<!-- lg -->
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-lg">
  <a role="tab" class="$$tab">Large</a>
  <a role="tab" class="$$tab $$tab-active">Large</a>
  <a role="tab" class="$$tab">Large</a>
</div>

radio tab bordered + tab content

Tab content 1
Tab content 2
Tab content 3
<div role="tablist" class="$$tabs $$tabs-bordered">
  <input type="radio" name="my_tabs_1" role="tab" class="$$tab" aria-label="Tab 1" />
  <div role="tabpanel" class="$$tab-content p-10">Tab content 1</div>

  <input
    type="radio"
    name="my_tabs_1"
    role="tab"
    class="$$tab"
    aria-label="Tab 2"
    checked="checked" />
  <div role="tabpanel" class="$$tab-content p-10">Tab content 2</div>

  <input type="radio" name="my_tabs_1" role="tab" class="$$tab" aria-label="Tab 3" />
  <div role="tabpanel" class="$$tab-content p-10">Tab content 3</div>
</div>
<div role="tablist" class="$$tabs $$tabs-bordered">
  <input type="radio" name="my_tabs_1" role="tab" class="$$tab" aria-label="Tab 1" />
  <div role="tabpanel" class="$$tab-content p-10">Tab content 1</div>

  <input
    type="radio"
    name="my_tabs_1"
    role="tab"
    class="$$tab"
    aria-label="Tab 2"
    checked="checked" />
  <div role="tabpanel" class="$$tab-content p-10">Tab content 2</div>

  <input type="radio" name="my_tabs_1" role="tab" class="$$tab" aria-label="Tab 3" />
  <div role="tabpanel" class="$$tab-content p-10">Tab content 3</div>
</div>

radio tab lift + tab content

Tab content 1
Tab content 2
Tab content 3
<div role="tablist" class="$$tabs $$tabs-lift">
  <input type="radio" name="my_tabs_2" role="tab" class="$$tab" aria-label="Tab 1" />
  <div role="tabpanel" class="$$tab-content bg-base-100 border-base-300 rounded-box p-6">
    Tab content 1
  </div>

  <input
    type="radio"
    name="my_tabs_2"
    role="tab"
    class="$$tab"
    aria-label="Tab 2"
    checked="checked" />
  <div role="tabpanel" class="$$tab-content bg-base-100 border-base-300 rounded-box p-6">
    Tab content 2
  </div>

  <input type="radio" name="my_tabs_2" role="tab" class="$$tab" aria-label="Tab 3" />
  <div role="tabpanel" class="$$tab-content bg-base-100 border-base-300 rounded-box p-6">
    Tab content 3
  </div>
</div>
<div role="tablist" class="$$tabs $$tabs-lift">
  <input type="radio" name="my_tabs_2" role="tab" class="$$tab" aria-label="Tab 1" />
  <div role="tabpanel" class="$$tab-content bg-base-100 border-base-300 rounded-box p-6">
    Tab content 1
  </div>

  <input
    type="radio"
    name="my_tabs_2"
    role="tab"
    class="$$tab"
    aria-label="Tab 2"
    checked="checked" />
  <div role="tabpanel" class="$$tab-content bg-base-100 border-base-300 rounded-box p-6">
    Tab content 2
  </div>

  <input type="radio" name="my_tabs_2" role="tab" class="$$tab" aria-label="Tab 3" />
  <div role="tabpanel" class="$$tab-content bg-base-100 border-base-300 rounded-box p-6">
    Tab content 3
  </div>
</div>

Tabs with custom color

<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Tab 1</a>
  <a
    role="tab"
    class="$$tab $$tab-active text-primary [--tab-bg:yellow] [--tab-border-color:orange]">
    Tab 2
  </a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift">
  <a role="tab" class="$$tab">Tab 1</a>
  <a
    role="tab"
    class="$$tab $$tab-active text-primary [--tab-bg:yellow] [--tab-border-color:orange]">
    Tab 2
  </a>
  <a role="tab" class="$$tab">Tab 3</a>
</div>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser