Tabs

A composable tabs component built on Base UI's Tabs primitive. It supports horizontal and vertical orientations, and the tab list offers two visual variants: a filled default style with a muted background and a minimal line style with an active-state underline.

Make changes to your account here.

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

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <p className="text-sm text-muted-foreground">
          Make changes to your account here.
        </p>
      </TabsContent>
      <TabsContent value="password">
        <p className="text-sm text-muted-foreground">
          Change your password here.
        </p>
      </TabsContent>
    </Tabs>
  )
}

Anatomy

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

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings here.</TabsContent>
  <TabsContent value="password">Password settings here.</TabsContent>
</Tabs>

Examples

Default variant

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content.</TabsContent>
  <TabsContent value="analytics">Analytics content.</TabsContent>
  <TabsContent value="reports">Reports content.</TabsContent>
</Tabs>

Line variant

Pass variant="line" to TabsList for an underline-style tab indicator.

<Tabs defaultValue="overview">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content.</TabsContent>
  <TabsContent value="analytics">Analytics content.</TabsContent>
  <TabsContent value="reports">Reports content.</TabsContent>
</Tabs>

Vertical orientation

<Tabs defaultValue="general" orientation="vertical">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="security">Security</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="general">General settings.</TabsContent>
  <TabsContent value="security">Security settings.</TabsContent>
  <TabsContent value="notifications">Notification preferences.</TabsContent>
</Tabs>

Disabled tab

<Tabs defaultValue="active">
  <TabsList>
    <TabsTrigger value="active">Active</TabsTrigger>
    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
  </TabsList>
  <TabsContent value="active">Active content.</TabsContent>
</Tabs>

API Reference

Tabs

The root component. Renders a flex container that arranges the list and panels.

Prop	Type	Default	Description
`value`	`string`	—	The controlled active tab value.
`defaultValue`	`string`	—	The initial uncontrolled active tab value.
`onValueChange`	`(value: string) => void`	—	Callback when the active tab changes.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The tab layout direction.
`className`	`string`	—
`children`	`ReactNode`	—

TabsList

The container for tab triggers. Supports visual variants via CVA.

Prop	Type	Default	Description
`variant`	`"default" \| "line"`	`"default"`	`"default"` renders a filled muted background. `"line"` renders a transparent background with an underline indicator on the active tab.
`className`	`string`	—
`children`	`ReactNode`	—

TabsTrigger

An individual tab button. Highlights when active and supports disabled state.

Prop	Type	Default	Description
`value`	`string`	—	The value that associates this trigger with a `TabsContent` panel.
`disabled`	`boolean`	`false`	Whether the tab is disabled.
`className`	`string`	—
`children`	`ReactNode`	—

TabsContent

The panel displayed when its corresponding tab is active.

Prop	Type	Default	Description
`value`	`string`	—	The value that associates this panel with a `TabsTrigger`.
`className`	`string`	—
`children`	`ReactNode`	—