Tabs

Show content in a tabbed layout.

  • Name: John Doe
  • Age: 31
  • From: Hong Kong
  • Language: English
  • Time-zone: UTC+08:00 Beijing, Shanghai, Hong Kong
  • United States
  • Italy
  • France
<x-tabs>
  <x-tab label="Profile" icon="heroicon-o-user" class="bg-base-100 border-base-300 p-4">
	<ul>
	  <li>Name: John Doe</li>
	  <li>Age: 31</li>
	  <li>From: Hong Kong</li>
	</ul>
  </x-tab>
  <x-tab label="Settings" icon="heroicon-o-cog-8-tooth" class="bg-base-100 border-base-300 p-4">
	<ul>
	  <li>Language: English</li>
	  <li>Time-zone: UTC+08:00 Beijing, Shanghai, Hong Kong</li>
	</ul>
  </x-tab>
  <x-tab label="Travel history" icon="heroicon-o-globe-alt" class="bg-base-100 border-base-300 p-4">
	<ul>
	  <li>United States</li>
	  <li>Italy</li>
	  <li>France</li>
	</ul>
  </x-tab>
</x-tabs>

#The tabs parameter

Like other components, if you have an object/array descriptor of the tabs' content and you want them rendered uniformly, you can shorten your code thanks the tabs attribute and a @foreach loop.

  • Name: Jane Doe
  • Age: 28
  • From: San Diego
  • Language: English
  • Time-zone: UTC-08:00 Pacific Standard Time
  • United States
  • Canada
  • Mexico
<x-tabs :tabs="$tabs">
  @foreach ($tabs as $tab)
	<x-tab :label="$tab['label']" :icon="$tab['icon']" class="bg-base-100 border-base-300 p-4">
	  <ul>
		@if (array_is_list($tab['content']))
		  @foreach ($tab['content'] as $item)
			<li>{{ $item }}</li>
		  @endforeach
		@else
		  @foreach ($tab['content'] as $item => $value)
			<li>{{ $item }}: {{ $value }}</li>
		  @endforeach
		@endif
	  </ul>
	</x-tab>
  @endforeach
</x-tabs>

tabs = [
  [
	'label' => 'Profile',
	'icon' => 'heroicon-o-user',
	'content' => [
	  'Name' => 'Jane Doe',
	  'Age' => 28,
	  'From' => 'San Diego'
	]
  ], [
	'label' => 'Settings',
	'icon' => 'heroicon-o-cog-8-tooth',
	'content' => [
	  'Language' => 'English',
	  'Time-zone' => 'UTC-08:00 Pacific Standard Time'
	]
  ], [
	'label' => 'Travel history',
	'icon' => 'heroicon-o-globe-alt',
	'content' => [ 'United States', 'Canada', 'Mexico']
  ]
];

#Tab variants

Use the variant={border|lift|box} attribute to change the appearance of tabs.
Note that box is exclusive to DaisyUI.

Bordered tab 1
Bordered tab 2
Lifted tab 1
Lifted tab 2
Box tab 1 (DaisyUI only)
Box tab 2 (DaisyUI only) 
<x-tabs variant="border">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Bordered tab 1
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	Bordered tab 2
  </x-tab>
</x-tabs>

<x-tabs variant="lift">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Lifted tab 1
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	Lifted tab 2
  </x-tab>
</x-tabs>

<x-tabs variant="box">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Box tab 1 (DaisyUI only)
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	Box tab 2 (DaisyUI only)
  </x-tab>
</x-tabs>

#Size

Use the size attribute to change the size of tabs.

Extra-large...
... and bordered
Large...
... and bordered
Medium size...
... and bordered
Small...
... and bordered
Tiny...
... and bordered 
<x-tabs variant="border" size="xl">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Extra-large...
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	... and bordered
  </x-tab>
</x-tabs>

<x-tabs variant="border" size="lg">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Large...
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	... and bordered
  </x-tab>
</x-tabs>

<x-tabs variant="border">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Medium size...
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	... and bordered
  </x-tab>
</x-tabs>

<x-tabs variant="border" size="sm">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Small...
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	... and bordered
  </x-tab>
</x-tabs>

<x-tabs variant="border" size="xs">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Tiny...
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	... and bordered
  </x-tab>
</x-tabs>

#Pills (Empty tabs)

The <x-tab> component does not need to have more than a label. If you leave it empty, your tabs become simple pills.

<x-tabs variant="box">
  <x-tab label="Tab 1"/>
  <x-tab label="Tab 2"/>
  <x-tab label="Tab 3"/>
</x-tabs>

#Vertical tabs

Tabs can be made vertical thanks to the vertical attribute. In that configuration, the lift variant is not supported.

These tabs are vertical
Thanks to the vertical attribute
  • Name: Jane Doe
  • Age: 28
  • From: San Diego
  • Language: English
  • Time-zone: UTC-08:00 Pacific Standard Time
  • United States
  • Canada
  • Mexico
<x-tabs variant="border" vertical>
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	These tabs are vertical
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	Thanks to the vertical attribute
  </x-tab>
</x-tabs>

<x-tabs vertical variant="box" :tabs="$tabs" class="gap-x-1 p-2">
  @foreach ($tabs as $tab)
	<x-tab :label="$tab['label']" :icon="$tab['icon']" class="bg-base-100 border-base-300 p-4">
	  <ul>
		@if (array_is_list($tab['content']))
		  @foreach ($tab['content'] as $item)
			<li>{{ $item }}</li>
		  @endforeach
		@else
		  @foreach ($tab['content'] as $item => $value)
			<li>{{ $item }}: {{ $value }}</li>
		  @endforeach
		@endif
	  </ul>
	</x-tab>
  @endforeach
</x-tabs>

tabs = [
  [
	'label' => 'Profile',
	'icon' => 'heroicon-o-user',
	'content' => [
	  'Name' => 'Jane Doe',
	  'Age' => 28,
	  'From' => 'San Diego'
	]
  ], [
	'label' => 'Settings',
	'icon' => 'heroicon-o-cog-8-tooth',
	'content' => [
	  'Language' => 'English',
	  'Time-zone' => 'UTC-08:00 Pacific Standard Time'
	]
  ], [
	'label' => 'Travel history',
	'icon' => 'heroicon-o-globe-alt',
	'content' => [ 'United States', 'Canada', 'Mexico']
  ]
];

#Tab alignment

Tabs can be aligned with the align={start|center|end|stretch} attribute (start is the default), the last value of which expands them to cover the whole top of the tab

By default tabs are aligned to the left
Tab content 2.
Use justify-center to center the tabs.
Tab content 2.
Use justify-end to push the tabs to the right.
Tab content 2.
Use growing tab labels to extend tabs the entire width.
Content of the second tab. 
<x-tabs variant="border">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	By default tabs are aligned to the left
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	Tab content 2.
  </x-tab>
</x-tabs>

<x-tabs variant="border" align="center">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Use justify-center to center the tabs.
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	Tab content 2.
  </x-tab>
</x-tabs>

<x-tabs variant="border" align="end">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Use justify-end to push the tabs to the right.
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	Tab content 2.
  </x-tab>
</x-tabs>

<x-tabs variant="border" align="stretch">
  <x-tab label="Tab 1" class="bg-base-100 border-base-300 p-4">
	Use growing tab labels to extend tabs the entire width.
  </x-tab>
  <x-tab label="Tab 2" class="bg-base-100 border-base-300 p-4">
	Content of the second tab.
  </x-tab>
</x-tabs>

#Troubleshooting

#Extending the border for lifted tabs

Lifted tabs only show a border around the tab buttons, not around the content. 2 issues may arise:

Tab 1 has no bottom border if you select another tab (DaisyUI-only issue).
Tab content 2
Tab content 3
Thanks to the added class, Tab 1 will now show a bottom border.
Tab content 2
Tab content 3
Here, all tab contents have a border.
Tab content 2
Tab content 3 
<x-tabs variant="lift">
  <x-tab class="p-2" label="Tab 1">
	Tab 1 has no bottom border if you select another tab (DaisyUI-only issue).
  </x-tab>
  <x-tab class="p-2" label="Tab 2">
	Tab content 2
  </x-tab>
  <x-tab class="p-2" label="Tab 3">
	Tab content 3
  </x-tab>
</x-tabs>

<x-tabs class="[&>label]:not-has-checked:[--tab-border-colors:_#0000_#0000_var(--tab-border-color)_#0000]" variant="lift">
  <x-tab class="p-2" label="Tab 1">
	Thanks to the added class, Tab 1 will now show a bottom border.
  </x-tab>
  <x-tab class="p-2" label="Tab 2">
	Tab content 2
  </x-tab>
  <x-tab class="p-2" label="Tab 3">
	Tab content 3
  </x-tab>
</x-tabs>

<x-tabs variant="lift">
	<x-tab class="p-2 border-1 border-base-300" label="Tab 1">
	  Here, all tab contents have a border.
	</x-tab>
	<x-tab class="p-2 border-1 border-base-300" label="Tab 2">
	  Tab content 2
	</x-tab>
	<x-tab class="p-2 border-1 border-base-300" label="Tab 3">
	  Tab content 3
	</x-tab>
  </x-tabs>

#Tab containers are not rounded at the corners (FlyonUI)

FlyonUI currently does not rounded the corners of tab containers, which makes then look different from e.g. cards for some themes.

Cards have rounded corners
Tabs are rounded like cards in DaisyUI, not in FlyonUI.
Tab content 2
Tab content 3 
<div class="flex flex-col gap-2">
  <x-card class="border-1 border-black">
	Cards have rounded corners
  </x-card>
  
  <x-tabs variant="lift">
	<x-tab class="p-6 bg-base-100 border-1 border-error" style="--tab-border-color: var(--color-error)" label="Tab 1">
	  Tabs are rounded like cards in DaisyUI, not in FlyonUI.
	</x-tab>
	<x-tab class="p-6 bg-base-100 border-1 border-error" style="--tab-border-color: var(--color-error)" label="Tab 2">
	  Tab content 2
	</x-tab>
	<x-tab class="p-6 bg-base-100 border-1 border-error" style="--tab-border-color: var(--color-error)" label="Tab 3">
	  Tab content 3
	</x-tab>
  </x-tabs>
</div>

But the fix attribute solves this issue.

Tabs are now correctly rounded.
Tab content 2
Tab content 3
Tabs are now correctly rounded.
Tab content 2
Tab content 3
Tabs are now correctly rounded.
Tab content 2
Tab content 3
Tabs are now correctly rounded.
Tab content 2
Tab content 3 
<div class="flex flex-col gap-2">

  <x-tabs fix variant="lift">
	<x-tab class="p-6 bg-base-100 border-1 border-success"
		   style="--tab-border-color: var(--color-success);"
		   label="Tab 1">
	  Tabs are now correctly rounded.
	</x-tab>
	<x-tab class="p-6 bg-base-100 border-1 border-success"
		   style="--tab-border-color: var(--color-success)"
		   label="Tab 2">
	  Tab content 2
	</x-tab>
	<x-tab class="p-6 bg-base-100 border-1 border-success"
		   style="--tab-border-color: var(--color-success)"
		   label="Tab 3">
	  Tab content 3
	</x-tab>
  </x-tabs>
</div>

<x-tabs fix variant="lift" align="center">
	<x-tab class="p-6 bg-base-100 border-1 border-success"
		   style="--tab-border-color: var(--color-success);"
		   label="Tab 1">
	  Tabs are now correctly rounded.
	</x-tab>
	<x-tab class="p-6 bg-base-100 border-1 border-success"
		   style="--tab-border-color: var(--color-success)"
		   label="Tab 2">
	  Tab content 2
	</x-tab>
	<x-tab class="p-6 bg-base-100 border-1 border-success"
		   style="--tab-border-color: var(--color-success)"
		   label="Tab 3">
	  Tab content 3
	</x-tab>
</x-tabs>

<x-tabs fix variant="lift" align="end">
	<x-tab class="p-6 bg-base-100 border-1 border-success"
		   style="--tab-border-color: var(--color-success);"
		   label="Tab 1">
	  Tabs are now correctly rounded.
	</x-tab>
	<x-tab class="p-6 bg-base-100 border-1 border-success"
		   style="--tab-border-color: var(--color-success)"
		   label="Tab 2">
	  Tab content 2
	</x-tab>
	<x-tab class="p-6 bg-base-100 border-1 border-success"
		   style="--tab-border-color: var(--color-success)"
		   label="Tab 3">
	  Tab content 3
	</x-tab>
</x-tabs>

<x-tabs fix variant="lift" align="stretch">
	<x-tab class="p-6 bg-base-100 border-1 border-success">
	  <x-slot:label class="grow" style="--tab-border-color: var(--color-success)">Tab 1</x-slot:label>
	  Tabs are now correctly rounded.
	</x-tab>
	<x-tab class="p-6 bg-base-100 border-1 border-success">
	  <x-slot:label class="grow" style="--tab-border-color: var(--color-success)">Tab 2</x-slot:label>
	  Tab content 2
	</x-tab>
	<x-tab class="p-6 bg-base-100 border-1 border-success ">
	  <x-slot:label class="grow" style="--tab-border-color: var(--color-success)">Tab 3</x-slot:label>
	  Tab content 3
	</x-tab>
</x-tabs>

#Tab curve render wrong

FlyonUI struggles with tabs when the rounding of box is too large. This is actually an issue that can be seen on the website of FlyonUI itself. If you wish to, open this link to the example and render the page with e.g. the Pastel theme but below is an example:

Tab content 1
Tab content 2
Tab content 3 
<div data-theme="" class="p-2 bg-base-200" style="
    --color-base-100: oklch(28% .0292 308.75);
    --color-base-200: oklch(21.82% .0098 52.95);
    --color-base-300: oklch(34.67% .0053 301.25);
    --color-base-content: oklch(98% .003 247.858);
    --color-primary: oklch(79% .12 295.97);
    --color-primary-content: oklch(100% 0 0);
    --color-secondary: oklch(91% .05 306.07);
    --color-secondary-content: oklch(45% .03 257.68);
    --color-accent: oklch(72% .2 210);
    --color-accent-content: oklch(37% .03 259.73);
    --color-neutral: oklch(100% 0 0);
    --color-neutral-content: oklch(14% .004 49.25);
    --color-info: oklch(50% .25 255.25);
    --color-info-content: oklch(100% 0 0);
    --color-success: oklch(69% .17 162.48);
    --color-success-content: oklch(100% 0 0);
    --color-warning: oklch(79% .184 86.047);
    --color-warning-content: oklch(0% 0 0);
    --color-error: oklch(64% .246 16.439);
    --color-error-content: oklch(100% 0 0);
    --radius-selector: 2rem;
    --radius-field: 2rem;
    --radius-box: 2rem;
    --size-selector: .25rem;
    --size-field: .25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;">     
	<x-tabs class="break-inside-avoid border-base-300" variant="lift">
	  <x-tab
			 class="p-6 bg-base-100 border-1 border-base-300 rounded-e-[var(--radius-box)] rounded-es-[var(--radius-box)]"
			 style="--tab-border-color: var(--color-base-300);"
			 label="Tab 1">
		Tab content 1
	  </x-tab>
	  <x-tab class="p-6 bg-base-100 border-1 border-base-300 rounded-[var(--radius-box)]" style="--tab-border-color: var(--color-base-300)" label="Tab 2">
		Tab content 2
	  </x-tab>
	  <x-tab class="p-6 bg-base-100 border-1 border-base-300 rounded-[var(--radius-box)]" style="--tab-border-color: var(--color-base-300)" label="Tab 3">
		Tab content 3
	  </x-tab>
  </x-tabs>
</div>

The curves quite obviously do not line up but again, the fix attribute comes to the rescue.

Tab content 1
Tab content 2
Tab content 3 
<div data-theme="" class="p-2 bg-base-200" style="
	color-scheme: normal;
    --color-base-100: oklch(28% .0292 308.75);
    --color-base-200: oklch(21.82% .0098 52.95);
    --color-base-300: oklch(34.67% .0053 301.25);
    --color-base-content: oklch(98% .003 247.858);
    --color-primary: oklch(79% .12 295.97);
    --color-primary-content: oklch(100% 0 0);
    --color-secondary: oklch(91% .05 306.07);
    --color-secondary-content: oklch(45% .03 257.68);
    --color-accent: oklch(72% .2 210);
    --color-accent-content: oklch(37% .03 259.73);
    --color-neutral: oklch(100% 0 0);
    --color-neutral-content: oklch(14% .004 49.25);
    --color-info: oklch(50% .25 255.25);
    --color-info-content: oklch(100% 0 0);
    --color-success: oklch(69% .17 162.48);
    --color-success-content: oklch(100% 0 0);
    --color-warning: oklch(79% .184 86.047);
    --color-warning-content: oklch(0% 0 0);
    --color-error: oklch(64% .246 16.439);
    --color-error-content: oklch(100% 0 0);
    --radius-selector: 2rem;
    --radius-field: 2rem;
    --radius-box: 2rem;
    --size-selector: .25rem;
    --size-field: .25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;">     
	<x-tabs fix class="border-base-300"

			variant="lift">
	  <x-tab
			 class="p-6 bg-base-100 border-1 border-base-300 rounded-e-[var(--radius-box)] rounded-es-[var(--radius-box)]"
			 style="--tab-border-color: var(--color-base-300);"
			 label="Tab 1">
		Tab content 1
	  </x-tab>
	  <x-tab class="p-6 bg-base-100 border-1 border-base-300 rounded-[var(--radius-box)]" style="--tab-border-color: var(--color-base-300)" label="Tab 2">
		Tab content 2
	  </x-tab>
	  <x-tab class="p-6 bg-base-100 border-1 border-base-300 rounded-[var(--radius-box)]" style="--tab-border-color: var(--color-base-300)" label="Tab 3">
		Tab content 3
	  </x-tab>
  </x-tabs>
</div>