Introduction

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. Built on Radix UI for full keyboard navigation and accessibility.

Installation

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

Usage

<Tabs defaultValue="tab1">
<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>

Examples

Default

Make changes to your account here. Click save when you are done.

TabsDefault

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

export default function Component() {
  return (
    <Tabs defaultValue="account" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account"><p className="text-sm">Account settings.</p></TabsContent>
      <TabsContent value="password"><p className="text-sm">Password settings.</p></TabsContent>
    </Tabs>
  );
}

Pills

Pills variant — active tab fills with primary.

TabsPills

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

export default function Component() {
  return (
    <Tabs variant="pills" defaultValue="overview" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
      </TabsList>
      <TabsContent value="overview"><p className="text-sm">Overview content.</p></TabsContent>
      <TabsContent value="analytics"><p className="text-sm">Analytics content.</p></TabsContent>
      <TabsContent value="reports"><p className="text-sm">Reports content.</p></TabsContent>
    </Tabs>
  );
}

Underline

Underline variant — active tab gets a primary-colored 2px underline.

TabsUnderline

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

export default function Component() {
  return (
    <Tabs variant="underline" defaultValue="general" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="general">General</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsContent value="general"><p className="text-sm">General settings.</p></TabsContent>
      <TabsContent value="security"><p className="text-sm">Security settings.</p></TabsContent>
      <TabsContent value="billing"><p className="text-sm">Billing settings.</p></TabsContent>
    </Tabs>
  );
}

Disabled Tab

This tab is active and selectable.

TabsDisabled

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

export default function Component() {
  return (
    <Tabs defaultValue="active" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="active">Active</TabsTrigger>
        <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
        <TabsTrigger value="another">Another</TabsTrigger>
      </TabsList>
      <TabsContent value="active"><p className="text-sm">Active tab content.</p></TabsContent>
      <TabsContent value="another"><p className="text-sm">Another tab content.</p></TabsContent>
    </Tabs>
  );
}

API Reference

Tabs

Prop	Type	Default	Description
`defaultValue`	`string`	—	Initially active tab
`value`	`string`	—	Controlled active tab
`onValueChange`	`(value: string) => void`	—	Change handler
`variant`	`'tabs' \| 'pills' \| 'underline'`	`'tabs'`	Visual style — passed to children via context

TabsTrigger

Prop	Type	Default	Description
`value`	`string`	—	Tab identifier
`disabled`	`boolean`	`false`	Disable the tab

Tabs

On this page