Tabs

Organize content across multiple panels with interactive tabs. Supports card-based and standalone navigation modes.

Default (Card style)

Use the card prop to wrap tabs in a card layout with card-header styled navigation.

<TTabs v-model="activeTab" card>
  <TTabPane name="home" title="Home">
    <h4>Home tab</h4>
  </TTabPane>
  <TTabPane name="profile" title="Profile">
    <h4>Profile tab</h4>
  </TTabPane>
</TTabs>

With Icons

Pass an @tabler/icons-vue component via the icon prop to display an icon before the tab title.

Show Code

<TTabs v-model="activeTab" card>
  <TTabPane name="home" title="Home" :icon="IconHome">
    <h4>Home tab</h4>
  </TTabPane>
  <TTabPane name="profile" title="Profile" :icon="IconUser">
    <h4>Profile tab</h4>
  </TTabPane>
  <TTabPane name="settings" title="Settings" :icon="IconSettings">
    <h4>Settings tab</h4>
  </TTabPane>
</TTabs>

Full-width Tabs

Set justify="fill" to distribute tabs evenly across the full navigation width.

Show Code

<TTabs v-model="activeTab" card justify="fill">
  <TTabPane name="home" title="Home" :icon="IconHome">
    <h4>Home tab</h4>
  </TTabPane>
  <TTabPane name="profile" title="Profile" :icon="IconUser">
    <h4>Profile tab</h4>
  </TTabPane>
  <TTabPane name="settings" title="Settings" :icon="IconSettings">
    <h4>Settings tab</h4>
  </TTabPane>
</TTabs>

Standalone Mode

Without the card prop, the tab navigation renders on its own — suitable for page-level navigation.

Show Code

<TTabs v-model="activeTab">
  <TTabPane name="home" title="Home">
    <!-- content -->
  </TTabPane>
  <TTabPane name="profile" title="Profile">
    <!-- content -->
  </TTabPane>
</TTabs>

Disabled Tab

Set disabled on a TTabPane to prevent it from being activated.

Show Code

<TTabs v-model="activeTab" card>
  <TTabPane name="home" title="Home" :icon="IconHome">
    <h4>Home tab</h4>
  </TTabPane>
  <TTabPane name="profile" title="Profile" :icon="IconUser" disabled>
    <h4>Profile tab (disabled)</h4>
  </TTabPane>
  <TTabPane name="settings" title="Settings" :icon="IconSettings">
    <h4>Settings tab</h4>
  </TTabPane>
</TTabs>

API

TTabs Props

Prop	Description	Type	Default
modelValue	Currently active tab name (v-model)	string	undefined
defaultActive	Default active tab (uncontrolled)	string	undefined
card	Enable card layout	boolean	false
justify	Navigation alignment	'start' | 'center' | 'end' | 'fill'	undefined

TTabs Emits

Event	Description	Type
update:modelValue	v-model update event	(value: string) => void
change	Emitted when the active tab changes	(name: string) => void

TTabs Slots

Slot	Description
default	TTabPane child components
header	Custom area on the right side of the nav

TTabPane Props

Prop	Description	Type	Default
name	Unique identifier	string	— (required)
title	Navigation label text	string	— (required)
icon	Icon component (from @tabler/icons-vue)	Icon	undefined
disabled	Whether the tab is disabled	boolean	false

TTabPane Slots

Slot	Description
default	Tab content panel