# Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Page: https://sui.draco.dev/docs/components/tabs

### Example: tabs-demo

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@workspace/ui/components/card";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@workspace/ui/components/tabs";

export function TabsDemo() {
  return (
    <Tabs defaultValue="overview" className="w-[400px] max-w-full">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <Card>
          <CardHeader>
            <CardTitle>Overview</CardTitle>
            <CardDescription>
              View your key metrics and recent project activity. Track progress
              across all your active projects.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            You have 12 active projects and 3 pending tasks.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="analytics">
        <Card>
          <CardHeader>
            <CardTitle>Analytics</CardTitle>
            <CardDescription>
              Track performance and user engagement metrics. Monitor trends and
              identify growth opportunities.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            Page views are up 25% compared to last month.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="reports">
        <Card>
          <CardHeader>
            <CardTitle>Reports</CardTitle>
            <CardDescription>
              Generate and download your detailed reports. Export data in
              multiple formats for analysis.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            You have 5 reports ready and available to export.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="settings">
        <Card>
          <CardHeader>
            <CardTitle>Settings</CardTitle>
            <CardDescription>
              Manage your account preferences and options. Customize your
              experience to fit your needs.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            Configure notifications, security, and themes.
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  );
}

export default TabsDemo;
```

## Installation

```bash
bunx --bun shadcn@latest add @sui/tabs
```

Install with the shadcn CLI or use the shared `@workspace/ui` package. Follow the [installation guide](/docs/installation) to configure the registry, load styles, and choose import aliases.

## Usage

```tsx showLineNumbers
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@workspace/ui/components/tabs"
```

```tsx showLineNumbers
<Tabs defaultValue="account" className="w-[400px] max-w-full">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>
```

## Composition

Use the following composition to build `Tabs`:

```text
Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent
```

## Line

Use the `variant="line"` prop on `TabsList` for a line style.

### Example: tabs-line

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

export function TabsLine() {
  return (
    <Tabs defaultValue="overview">
      <TabsList variant="line">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
      </TabsList>
    </Tabs>
  );
}

export default TabsLine;
```

## Segment

Use the `variant="segment"` prop on `TabsList` for a compact segmented control. Use `wrapperClassName="w-full"` to fill the available width.

### Example: tabs-segment

```tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@workspace/ui/components/tabs";

export function TabsSegment() {
  return (
    <Tabs defaultValue="week" className="w-full max-w-xs">
      <TabsList variant="segment" wrapperClassName="w-full">
        <TabsTrigger value="day">Day</TabsTrigger>
        <TabsTrigger value="week">Week</TabsTrigger>
        <TabsTrigger value="month">Month</TabsTrigger>
      </TabsList>
      <TabsContent value="day">View today's activity.</TabsContent>
      <TabsContent value="week">View this week's activity.</TabsContent>
      <TabsContent value="month">View this month's activity.</TabsContent>
    </Tabs>
  );
}

export default function Preview() {
  return (
    <div className="flex w-full justify-center">
      <TabsSegment />
    </div>
  );
}
```

## Overflow

Tab lists scroll automatically when they exceed the available space. Arrow controls and faded edges indicate more tabs. Selected and focused tabs scroll into view within the list, including vertical and RTL layouts.

### Example: tabs-overflow

```tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@workspace/ui/components/tabs";

const tabs = [
  "Overview",
  "Activity",
  "Analytics",
  "Members",
  "Billing",
  "Settings",
];

export function TabsOverflow() {
  return (
    <Tabs defaultValue="Overview" className="w-full max-w-xs">
      <TabsList>
        {tabs.map((tab) => (
          <TabsTrigger key={tab} value={tab}>
            {tab}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((tab) => (
        <TabsContent key={tab} value={tab}>
          Manage your project's {tab.toLowerCase()}.
        </TabsContent>
      ))}
    </Tabs>
  );
}

export default function Preview() {
  return (
    <div className="flex w-full justify-center">
      <TabsOverflow />
    </div>
  );
}
```

## Vertical

Use `orientation="vertical"` for vertical tabs.

### Example: tabs-vertical

```tsx
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@workspace/ui/components/card";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@workspace/ui/components/tabs";
import type { ExampleProps } from "../types";

export function TabsVertical({ locale }: ExampleProps = {}) {
  const chinese = locale === "zh-CN";
  return (
    <Tabs
      defaultValue="account"
      orientation="vertical"
      className="w-full max-w-md gap-4"
    >
      <TabsList aria-label={chinese ? "账户设置" : "Account settings"}>
        <TabsTrigger value="account">
          {chinese ? "账户" : "Account"}
        </TabsTrigger>
        <TabsTrigger value="password">
          {chinese ? "密码" : "Password"}
        </TabsTrigger>
        <TabsTrigger value="notifications">
          {chinese ? "通知" : "Notifications"}
        </TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="min-w-0">
        <Card>
          <CardHeader>
            <CardTitle>{chinese ? "账户" : "Account"}</CardTitle>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            {chinese
              ? "在此查看你的个人资料与账户偏好"
              : "View your profile and account preferences here."}
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="password" className="min-w-0">
        <Card>
          <CardHeader>
            <CardTitle>{chinese ? "密码" : "Password"}</CardTitle>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            {chinese
              ? "使用唯一密码并启用双重验证以保护账户"
              : "Protect your account with a unique password and two-factor authentication."}
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="notifications" className="min-w-0">
        <Card>
          <CardHeader>
            <CardTitle>{chinese ? "通知" : "Notifications"}</CardTitle>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            {chinese
              ? "项目更新与账户提醒将发送到你的邮箱"
              : "Project updates and account alerts are delivered to your inbox."}
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  );
}

export default TabsVertical;
```

## Disabled

### Example: tabs-disabled

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

export function TabsDisabled() {
  return (
    <Tabs defaultValue="home">
      <TabsList>
        <TabsTrigger value="home">Home</TabsTrigger>
        <TabsTrigger value="settings" disabled>
          Disabled
        </TabsTrigger>
      </TabsList>
    </Tabs>
  );
}

export default TabsDisabled;
```

## Icons

### Example: tabs-icons

```tsx
import { Tabs, TabsList, TabsTrigger } from "@workspace/ui/components/tabs";
import { AppWindowIcon, CodeIcon } from "lucide-react";

export function TabsIcons() {
  return (
    <Tabs defaultValue="preview">
      <TabsList>
        <TabsTrigger value="preview">
          <AppWindowIcon />
          Preview
        </TabsTrigger>
        <TabsTrigger value="code">
          <CodeIcon />
          Code
        </TabsTrigger>
      </TabsList>
    </Tabs>
  );
}

export default TabsIcons;
```

## RTL

To enable RTL support in shadcn/ui, see the [RTL configuration guide](https://ui.shadcn.com/docs/rtl).

### Example: tabs-rtl

```tsx
"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@workspace/ui/components/card";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@workspace/ui/components/tabs";
import { type Translations, useTranslation } from "./support";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      overview: "Overview",
      analytics: "Analytics",
      reports: "Reports",
      settings: "Settings",
      overviewTitle: "Overview",
      overviewDesc:
        "View your key metrics and recent project activity. Track progress across all your active projects.",
      overviewContent: "You have 12 active projects and 3 pending tasks.",
      analyticsTitle: "Analytics",
      analyticsDesc:
        "Track performance and user engagement metrics. Monitor trends and identify growth opportunities.",
      analyticsContent: "Page views are up 25% compared to last month.",
      reportsTitle: "Reports",
      reportsDesc:
        "Generate and download your detailed reports. Export data in multiple formats for analysis.",
      reportsContent: "You have 5 reports ready and available to export.",
      settingsTitle: "Settings",
      settingsDesc:
        "Manage your account preferences and options. Customize your experience to fit your needs.",
      settingsContent: "Configure notifications, security, and themes.",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      overview: "نظرة عامة",
      analytics: "التحليلات",
      reports: "التقارير",
      settings: "الإعدادات",
      overviewTitle: "نظرة عامة",
      overviewDesc:
        "عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.",
      overviewContent: "لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.",
      analyticsTitle: "التحليلات",
      analyticsDesc:
        "تتبع مقاييس الأداء ومشاركة المستخدمين. راقب الاتجاهات وحدد فرص النمو.",
      analyticsContent: "زادت مشاهدات الصفحة بنسبة ٢٥٪ مقارنة بالشهر الماضي.",
      reportsTitle: "التقارير",
      reportsDesc:
        "إنشاء وتنزيل تقاريرك التفصيلية. تصدير البيانات بتنسيقات متعددة للتحليل.",
      reportsContent: "لديك ٥ تقارير جاهزة ومتاحة للتصدير.",
      settingsTitle: "الإعدادات",
      settingsDesc:
        "إدارة تفضيلات حسابك وخياراته. تخصيص تجربتك لتناسب احتياجاتك.",
      settingsContent: "تكوين الإشعارات والأمان والسمات.",
    },
  },
  he: {
    dir: "rtl",
    values: {
      overview: "סקירה כללית",
      analytics: "אנליטיקה",
      reports: "דוחות",
      settings: "הגדרות",
      overviewTitle: "סקירה כללית",
      overviewDesc:
        "הצג את המדדים העיקריים שלך ופעילות הפרויקט האחרונה. עקוב אחר התקדמות בכל הפרויקטים הפעילים שלך.",
      overviewContent: "יש לך 12 פרויקטים פעילים ו-3 משימות ממתינות.",
      analyticsTitle: "אנליטיקה",
      analyticsDesc:
        "עקוב אחר ביצועים ומדדי מעורבות משתמשים. עקוב אחר מגמות וזהה הזדמנויות צמיחה.",
      analyticsContent: "צפיות בדף עלו ב-25% בהשוואה לחודש שעבר.",
      reportsTitle: "דוחות",
      reportsDesc:
        "צור והורד את הדוחות המפורטים שלך. ייצא נתונים בפורמטים מרובים לניתוח.",
      reportsContent: "יש לך 5 דוחות מוכנים וזמינים לייצוא.",
      settingsTitle: "הגדרות",
      settingsDesc:
        "נהל את העדפות החשבון והאפשרויות שלך. התאם אישית את החוויה שלך כך שתתאים לצרכים שלך.",
      settingsContent: "הגדר התראות, אבטחה וערכות נושא.",
    },
  },
};

export function TabsRtl() {
  const { dir, t } = useTranslation(translations, "ar");

  return (
    <Tabs defaultValue="overview" className="w-full max-w-sm" dir={dir}>
      <TabsList dir={dir}>
        <TabsTrigger value="overview">{t.overview}</TabsTrigger>
        <TabsTrigger value="analytics">{t.analytics}</TabsTrigger>
        <TabsTrigger value="reports">{t.reports}</TabsTrigger>
        <TabsTrigger value="settings">{t.settings}</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <Card dir={dir}>
          <CardHeader>
            <CardTitle>{t.overviewTitle}</CardTitle>
            <CardDescription>{t.overviewDesc}</CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            {t.overviewContent}
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="analytics">
        <Card dir={dir}>
          <CardHeader>
            <CardTitle>{t.analyticsTitle}</CardTitle>
            <CardDescription>{t.analyticsDesc}</CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            {t.analyticsContent}
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="reports">
        <Card dir={dir}>
          <CardHeader>
            <CardTitle>{t.reportsTitle}</CardTitle>
            <CardDescription>{t.reportsDesc}</CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            {t.reportsContent}
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="settings">
        <Card dir={dir}>
          <CardHeader>
            <CardTitle>{t.settingsTitle}</CardTitle>
            <CardDescription>{t.settingsDesc}</CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            {t.settingsContent}
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  );
}

export default TabsRtl;
```

## Animation

The selected indicator and panel use the same 250ms easing. Content fades in from an 8px offset on the side of the newly selected tab: left or right for horizontal tabs, up or down for vertical tabs. Base UI derives the direction from the actual tab positions, including RTL. The initial panel appears without an entrance animation; inactive panels leave the layout immediately and cannot receive focus. Reduced motion disables the transition and offset. Selected tabs use the theme's `primary` and `primary-foreground` colors; the line variant uses `primary` for its indicator and selected label.

Use `indicatorClassName` on `TabsList` to customize the indicator and `wrapperClassName` for the outer container's layout. `className`, `ref`, and `render` continue to apply to the Base UI list. `TabsContent` retains Base UI's `keepMounted` behavior.

## API Reference

See the [Base UI Tabs](https://base-ui.com/react/components/tabs#api-reference) documentation.

- [Documentation](https://base-ui.com/react/components/tabs)
- [API reference](https://base-ui.com/react/components/tabs#api-reference)