Tabs

Tabs, Tab, and TabPanel work together to create an accessible tabbed interface. Tabs manages state and provides context; Tab renders the clickable button; TabPanel renders the matching content panel.

ExamplesCodeUsageChangelog

Basic

Overview content — a summary of the item.

Details content — in-depth information.

History content — a log of past changes.

Tailwind v4

<Tabs>
  <template #tabs>
    <Tab id="overview">Overview</Tab>
    <Tab id="details">Details</Tab>
    <Tab id="history">History</Tab>
  </template>
  <TabPanel id="overview">Overview content</TabPanel>
  <TabPanel id="details">Details content</TabPanel>
  <TabPanel id="history">History content</TabPanel>
</Tabs>

Default variant

Production panel content.

Equipment panel content.

Reports panel content.

Tailwind v4

<Tabs variant="default">
  <template #tabs>
    <Tab id="production">Production</Tab>
    <Tab id="equipment">Equipment</Tab>
    <Tab id="reports">Reports</Tab>
  </template>
  <TabPanel id="production">Production panel content.</TabPanel>
  <TabPanel id="equipment">Equipment panel content.</TabPanel>
  <TabPanel id="reports">Reports panel content.</TabPanel>
</Tabs>

Disabled tab

This tab is active and available.

This content is not reachable.

Another tab's content.

Tailwind v4

<Tabs>
  <template #tabs>
    <Tab id="active-tab">Active</Tab>
    <Tab id="disabled-tab" :disabled="true">Disabled</Tab>
    <Tab id="another-tab">Another</Tab>
  </template>
  <TabPanel id="active-tab">Active content</TabPanel>
  <TabPanel id="disabled-tab">Unreachable content</TabPanel>
  <TabPanel id="another-tab">Another tab's content</TabPanel>
</Tabs>

Controlled (v-model)

Active:

Tab A panel.

Tab B panel.

Tailwind v4

<script setup>
import { ref } from 'vue'
const activeTab = ref('tab-a')
</script>

<Tabs v-model="activeTab">
  <template #tabs>
    <Tab id="tab-a">Tab A</Tab>
    <Tab id="tab-b">Tab B</Tab>
  </template>
  <TabPanel id="tab-a">Tab A panel.</TabPanel>
  <TabPanel id="tab-b">Tab B panel.</TabPanel>
</Tabs>

Props

Tabs

Prop	Type	Default	Description
modelValue	string	—	Active tab id (controlled mode via v-model)
variant	'underlined' | 'default'	'underlined'	Visual style of the tab bar

Tab

Prop	Type	Default	Description
id	string	—	Required. Unique identifier; must match the corresponding TabPanel id
disabled	boolean	false	Prevents the tab from being selected

TabPanel

Prop	Type	Default	Description
id	string	—	Required. Must match the corresponding Tab id

Slots

Tabs

Slot	Description
tabs	Renders inside the tab bar (role="tablist"). Place Tab components here
default	Renders inside the content area. Place TabPanel components here

Tab

Slot	Description
default	Tab label text

TabPanel

Slot	Description
default	Panel content (kept mounted but hidden when not active)