On this page

Tabs

The Tabs component is used to display a collection of related content in multiple views. It provides an accessible and interactive way to organize content into tabbed sections.

Basic Usage

The most basic usage of tabs requires a Tabs component with a defaultValue, a TabsList containing TabsTrigger components, and corresponding TabsContent components.

<Tabs defaultValue="light">
  <TabsList>
    <TabsTrigger value="light">Light</TabsTrigger>
    <TabsTrigger value="dark">Dark</TabsTrigger>
    <TabsTrigger value="system">System</TabsTrigger>
  </TabsList>
  <TabsContent value="light">
    Light theme uses a white background with dark text for optimal readability in bright environments.
  </TabsContent>
  <TabsContent value="dark">
    Dark theme uses a dark background with light text to reduce eye strain in low-light conditions.
  </TabsContent>
  <TabsContent value="system">
    System theme automatically matches your operating system's appearance settings.
  </TabsContent>
</Tabs>

Synchronized Tabs

Use the syncKey prop to synchronize multiple tab groups. When a tab is selected in one group, all other groups with the same syncKey will automatically switch to the same value. This is useful for showing related content across different sections.

The currently selected syncKey is saved in local storage, so it persists across sessions and pages.

Press Win + R to open the Run dialog

Press Cmd + Space to open Spotlight

Press Alt + F2 to open the run dialog

<Tabs defaultValue="windows" syncKey="os">
  <TabsList>
    <TabsTrigger value="windows">Windows</TabsTrigger>
    <TabsTrigger value="macos">macOS</TabsTrigger>
    <TabsTrigger value="linux">Linux</TabsTrigger>
  </TabsList>
  <TabsContent value="windows">
    Press `Win + R` to open the Run dialog
  </TabsContent>
  <TabsContent value="macos">
    Press `Cmd + Space` to open Spotlight
  </TabsContent>
  <TabsContent value="linux">
    Press `Alt + F2` to open the run dialog
  </TabsContent>
</Tabs>

<Tabs defaultValue="windows" syncKey="os">
  <TabsList>
    <TabsTrigger value="windows">Windows</TabsTrigger>
    <TabsTrigger value="macos">macOS</TabsTrigger>
    <TabsTrigger value="linux">Linux</TabsTrigger>
  </TabsList>
  <TabsContent value="windows">
    The terminal is called "Command Prompt" or "PowerShell"
  </TabsContent>
  <TabsContent value="macos">
    The terminal is called "Terminal.app"
  </TabsContent>
  <TabsContent value="linux">
    The terminal depends on your distribution
  </TabsContent>
</Tabs>

Props

Tabs Component

The main container component that wraps all tab-related components.

Prop	Type	Required	Description
`defaultValue`	`string`	Yes	The initial active tab value
`syncKey`	`string`	No	Optional key to synchronize multiple tab groups
`class`	`string`	No	Additional CSS classes to apply

TabsList Component

The container for tab triggers that provides the tab navigation bar.

Prop	Type	Required	Description
`class`	`string`	No	Additional CSS classes to apply

TabsTrigger Component

The clickable tab button that activates its corresponding content.

Prop	Type	Required	Description
`value`	`string`	Yes	Unique identifier that matches a TabsContent value
`class`	`string`	No	Additional CSS classes to apply

TabsContent Component

The container for the content associated with each tab.

Prop	Type	Required	Description
`value`	`string`	Yes	Unique identifier that matches a TabsTrigger value
`class`	`string`	No	Additional CSS classes to apply

Features

Tab Synchronization

<Tabs defaultValue="tab1" syncKey="shared">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>

Styling

All components accept a class prop for custom styling. The components use Tailwind CSS classes by default and can be customized using the class:list directive:

<TabsList class="my-custom-tabs">
  <TabsTrigger class="custom-trigger">Tab 1</TabsTrigger>
</TabsList>

Accessibility

The tabs component follows WAI-ARIA guidelines for tabs:

TabsList has role="tablist"
TabsTrigger has role="tab" and appropriate aria-selected states
TabsContent has role="tabpanel"
Keyboard navigation is supported