--- title: Tabs desc: Tabs can be used to show a list of links in a tabbed format. source: https://raw.githubusercontent.com/saadeghi/daisyui/refs/heads/master/packages/daisyui/src/components/tab.css layout: components classnames: component: - class: tabs desc: Container of multiple tab items part: - class: tab desc: A single tab button (can be button, link, div, radio input, etc) - class: tab-content desc: Tab content that comes immediately after a tab style: - class: tabs-box desc: box style - class: tabs-border desc: bottom border style - class: tabs-lift desc: lift style modifier: - class: tab-active desc: Makes a single tab look active - class: tab-disabled desc: Makes a single tab look disabled placement: - class: tabs-top desc: Puts tab buttons on top of the tab-content (default) - class: tabs-bottom desc: Puts tabs on under the tab-content size: - class: tabs-xs desc: Extra small size - class: tabs-sm desc: Small size - class: tabs-md desc: Medium size default: true - class: tabs-lg desc: Large size - class: tabs-xl desc: Extra large size --- ### ~tabs
```html
Tab 1 Tab 2 Tab 3
``` ### ~tabs-border
```html
Tab 1 Tab 2 Tab 3
``` ### ~tabs-lift
```html
Tab 1 Tab 2 Tab 3
``` ### ~tabs-box
```html
Tab 1 Tab 2 Tab 3
``` ### ~tabs-box using radio inputs
```html
``` ### ~Sizes
```html
Xsmall Xsmall Xsmall
Small Small Small
Medium Medium Medium
Large Large Large
Xlarge Xlarge Xlarge
``` ### ~radio tabs-border + tab content
Tab content 1
Tab content 2
Tab content 3
```html
Tab content 1
Tab content 2
Tab content 3
``` ### ~radio tabs-lift + tab content
Tab content 1
Tab content 2
Tab content 3
```html
Tab content 1
Tab content 2
Tab content 3
``` ### ~radio tabs-lift with icons + tab content
Tab content 1
Tab content 2
Tab content 3
```html
Tab content 1
Tab content 2
Tab content 3
``` ### ~radio tabs-lift + tab content on bottom
Tab content 1
Tab content 2
Tab content 3
```html
Tab content 1
Tab content 2
Tab content 3
``` ### ~radio tabs-box + tab content
Tab content 1
Tab content 2
Tab content 3
```html
Tab content 1
Tab content 2
Tab content 3
``` ### ~tabs-box with a horizontal scroll when there's no space
Tab content 1
Tab content 2
Tab content 3
Tab content 4
```html
Tab content 1
Tab content 2
Tab content 3
Tab content 4
``` ### ~Tabs with custom color
```html
Tab 1 Tab 2 Tab 3
```