---
title: Tabs
description: A component for toggling between related panels on the same page.
links:
  doc: https://base-ui.com/react/components/tabs
  anatomy: https://base-ui.com/react/components/tabs#anatomy
  api: https://base-ui.com/react/components/tabs#api-reference
---

```tsx
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

export function TabsDemo() {
  return (
    <Tabs defaultValue="tab-1">
      <TabsList>
        <TabsTab value="tab-1">Tab 1</TabsTab>
        <TabsTab value="tab-2">Tab 2</TabsTab>
        <TabsTab value="tab-3">Tab 3</TabsTab>
      </TabsList>
      <TabsPanel value="tab-1" className="rounded-lg border">
        <p className="p-5 text-center text-muted-foreground text-xs">Tab 1 content</p>
      </TabsPanel>
      <TabsPanel value="tab-2" className="rounded-lg border">
        <p className="p-5 text-center text-muted-foreground text-xs">Tab 2 content</p>
      </TabsPanel>
      <TabsPanel value="tab-3" className="rounded-lg border">
        <p className="p-5 text-center text-muted-foreground text-xs">Tab 3 content</p>
      </TabsPanel>
    </Tabs>
  );
}
```

## Installation

<ComponentSource name="tabs" title="components/ui/tabs.tsx" />

## Usage

```tsx
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";
```

```tsx
<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsTab value="tab-1">Tab 1</TabsTab>
    <TabsTab value="tab-2">Tab 2</TabsTab>
    <TabsTab value="tab-3">Tab 3</TabsTab>
  </TabsList>
  <TabsPanel value="tab-1">
    <p>Tab 1 content</p>
  </TabsPanel>
  <TabsPanel value="tab-2">
    <p>Tab 2 content</p>
  </TabsPanel>
  <TabsPanel value="tab-3">
    <p>Tab 3 content</p>
  </TabsPanel>
</Tabs>
```

## Examples

### Underline variant

Pass `variant="underline"` prop to `TabsList` to use the underline style for the tabs.

```tsx
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

export function TabsDemo() {
  return (
    <Tabs defaultValue="tab-1">
      <TabsList variant="underline">
        <TabsTab value="tab-1">Tab 1</TabsTab>
        <TabsTab value="tab-2">Tab 2</TabsTab>
        <TabsTab value="tab-3">Tab 3</TabsTab>
      </TabsList>
      <TabsPanel value="tab-1" className="rounded-lg border">
        <p className="p-5 text-center text-muted-foreground text-xs">Tab 1 content</p>
      </TabsPanel>
      <TabsPanel value="tab-2" className="rounded-lg border">
        <p className="p-5 text-center text-muted-foreground text-xs">Tab 2 content</p>
      </TabsPanel>
      <TabsPanel value="tab-3" className="rounded-lg border">
        <p className="p-5 text-center text-muted-foreground text-xs">Tab 3 content</p>
      </TabsPanel>
    </Tabs>
  );
}
```