Skip to main content

Pathfinder v1.4is here!Now supporting multiple documentation tabs with their own sidebars.Learn more

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.

<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

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.

<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