Tabs

A tabbed interface for switching between views of related content. Built on @base-ui/react/tabs. Supports default and line list variants, plus horizontal and vertical orientations.

Anatomy

<Tabs> is the root; it contains a <TabsList> with one or more <TabsTrigger> elements, and a corresponding <TabsContent> for each trigger value.

Content for Tab One.

Variants

The variant prop on TabsList controls the visual style of the tab bar.

Default

Manage your account details here.

Line

High-level summary of your metrics.

Vertical Orientation

Pass orientation="vertical" to the <Tabs> root to stack the tab list alongside the content.

Manage your profile information.

States

This tab is currently active.

Design Guidelines

Do

  • Use for parallel, peer-level views. Tabs work best when each panel contains different content about the same subject.
  • Keep tab labels short. One or two words per trigger — long labels cause overflow and misalignment.
  • Choose line variant for page-level navigation. The default pill style suits settings panels; line suits page-level sections.

Don't

  • Don't use tabs for sequential steps. Use a stepper component for multi-step flows where order matters.
  • Don't add more than 7 tabs. Too many tabs overwhelm users and break on small screens. Consider a dropdown instead.
  • Don't nest tabs inside tabs. It creates a confusing hierarchy that is hard to navigate.

Developer Reference

Accessibility

  • Implements the WAI-ARIA Tabs pattern — role="tablist", role="tab", role="tabpanel", and aria-selected are managed automatically.
  • Keyboard: ← / → (horizontal) or ↑ / ↓ (vertical) cycle through tabs.
  • Each TabsContent panel is associated with its trigger via aria-controls and aria-labelledby automatically.

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

// Default variant
<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings…</TabsContent>
  <TabsContent value="password">Password settings…</TabsContent>
</Tabs>

// Line variant
<Tabs defaultValue="overview">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content…</TabsContent>
  <TabsContent value="analytics">Analytics content…</TabsContent>
</Tabs>

// Vertical orientation
<Tabs defaultValue="profile" orientation="vertical">
  <TabsList>
    <TabsTrigger value="profile">Profile</TabsTrigger>
    <TabsTrigger value="security">Security</TabsTrigger>
  </TabsList>
  <TabsContent value="profile">Profile content…</TabsContent>
  <TabsContent value="security">Security content…</TabsContent>
</Tabs>