Tabs

Switch between views without a page load. DaisyUI offers three visual variants — plain, bordered, lifted, and box — all purely CSS-driven. Use the radio-input method for built-in panel switching with no JavaScript.

Plain (default)

No variant — renders a simple underline-style tab bar.

Bordered

variant="bordered" — adds a bottom border to the active tab and an underline across the tab bar.

Lifted

variant="lifted" — the active tab is raised, connecting to the content panel below it.

Box

variant="box" — pill/box style with the active tab filled as a solid background.

Sizes

Five sizes: xs, sm, md, lg, xl.

With content panels — bordered

Radio inputs power built-in panel switching with zero JavaScript. Each <input type="radio" class="tab"> is paired with a <div class="tab-content">.

With content panels — lifted

The lifted variant visually connects the active tab to its panel.

With content panels — box

Disabled tab

Add tab-disabled to make a tab non-interactive.