---
type: doc
title: Tabs
description: A set of layered sections of content, known as tabs, that display one panel of content at a time.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/tabs/tabs-demo.astro"
---
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const tabs = [
  {
    value: "overview",
    title: "Overview",
    description:
      "View your key metrics and recent project activity. Track progress across all your active projects.",
    content: "You have 12 active projects and 3 pending tasks.",
  },
  {
    value: "analytics",
    title: "Analytics",
    description:
      "Track performance and user engagement metrics. Monitor trends and identify growth opportunities.",
    content: "Page views are up 25% compared to last month.",
  },
  {
    value: "reports",
    title: "Reports",
    description:
      "Generate and download your detailed reports. Export data in multiple formats for analysis.",
    content: "You have 5 reports ready and available to export.",
  },
  {
    value: "settings",
    title: "Settings",
    description:
      "Manage your account preferences and options. Customize your experience to fit your needs.",
    content: "Configure notifications, security, and themes.",
  },
]
---

<Tabs defaultValue="overview" class="w-[400px]">
  <TabsList>
    {tabs.map((tab) => (
      <TabsTrigger value={tab.value}>{tab.title}</TabsTrigger>
    ))}
  </TabsList>
  {tabs.map((tab) => (
    <TabsContent value={tab.value}>
      <Card>
        <CardHeader>
          <CardTitle>{tab.title}</CardTitle>
          <CardDescription>{tab.description}</CardDescription>
        </CardHeader>
        <CardContent class="text-sm text-muted-foreground">
          {tab.content}
        </CardContent>
      </Card>
    </TabsContent>
  ))}
</Tabs>
```

## Installation

```bash
npx shadcn@latest add @fulldev/tabs
```

## Usage

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

```astro
<Tabs defaultValue="account" class="w-[400px]">
  <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

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

## Line

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

```astro title="src/components/examples/tabs/tabs-line.astro"
---
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
---

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

## Vertical

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

```astro title="src/components/examples/tabs/tabs-vertical.astro"
---
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
---

<Tabs defaultValue="account" orientation="vertical">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
</Tabs>
```

## Disabled

```astro title="src/components/examples/tabs/tabs-disabled.astro"
---
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
---

<Tabs defaultValue="home">
  <TabsList>
    <TabsTrigger value="home">Home</TabsTrigger>
    <TabsTrigger value="settings" disabled>
      Disabled
    </TabsTrigger>
  </TabsList>
</Tabs>
```

## Icons

```astro title="src/components/examples/tabs/tabs-icons.astro"
---
import AppWindowIcon from "@lucide/astro/icons/app-window"
import CodeIcon from "@lucide/astro/icons/code"

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

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">
      <AppWindowIcon />
      Preview
    </TabsTrigger>
    <TabsTrigger value="code">
      <CodeIcon />
      Code
    </TabsTrigger>
  </TabsList>
</Tabs>
```

## RTL

Set `dir="rtl"` on `Tabs` and `TabsList`.

```astro title="src/components/examples/tabs/tabs-rtl.astro"
---
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const 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: "הגדר התראות, אבטחה וערכות נושא.",
    },
  },
} as const

const { dir, values: t } = translations.ar

const tabs = [
  {
    value: "overview",
    label: t.overview,
    title: t.overviewTitle,
    description: t.overviewDesc,
    content: t.overviewContent,
  },
  {
    value: "analytics",
    label: t.analytics,
    title: t.analyticsTitle,
    description: t.analyticsDesc,
    content: t.analyticsContent,
  },
  {
    value: "reports",
    label: t.reports,
    title: t.reportsTitle,
    description: t.reportsDesc,
    content: t.reportsContent,
  },
  {
    value: "settings",
    label: t.settings,
    title: t.settingsTitle,
    description: t.settingsDesc,
    content: t.settingsContent,
  },
]
---

<Tabs defaultValue="overview" class="w-full max-w-sm" dir={dir}>
  <TabsList dir={dir}>
    {tabs.map((tab) => (
      <TabsTrigger value={tab.value}>{tab.label}</TabsTrigger>
    ))}
  </TabsList>
  {tabs.map((tab) => (
    <TabsContent value={tab.value}>
      <Card dir={dir}>
        <CardHeader>
          <CardTitle>{tab.title}</CardTitle>
          <CardDescription>{tab.description}</CardDescription>
        </CardHeader>
        <CardContent class="text-sm text-muted-foreground">
          {tab.content}
        </CardContent>
      </Card>
    </TabsContent>
  ))}
</Tabs>
```

## API Reference

Source: [`src/components/ui/tabs`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/tabs)

| Component     | Prop             | Type                         | Default        |
| ------------- | ---------------- | ---------------------------- | -------------- |
| `Tabs`        | `defaultValue`   | `string`                     |                |
| `Tabs`        | `orientation`    | `"horizontal" \| "vertical"` | `"horizontal"` |
| `Tabs`        | `activationMode` | `"auto" \| "manual"`         | `"auto"`       |
| `TabsList`    | `variant`        | `"default" \| "line"`        | `"default"`    |
| `TabsTrigger` | `value`          | `string`                     |                |
| `TabsContent` | `value`          | `string`                     |                |

See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/tabs/README.md) for events and keyboard behavior.

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/tabs-examples
```