Navigation: [/sitemap.md](/sitemap.md)

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

```astro live props={{ name: 'tabs' }}
---
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
---

<Tabs defaultValue="tab-1" class="w-full max-w-sm">
  <TabsList class="grid w-full grid-cols-2">
    <TabsTrigger value="tab-1">Account</TabsTrigger>
    <TabsTrigger value="tab-2">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="tab-1">
    <div class="rounded-md border p-4">
      <h3 class="mb-2 font-semibold">Account</h3>
      <p class="text-muted-foreground text-sm">
        Make changes to your account here. Click save when you're done.
      </p>
    </div>
  </TabsContent>
  <TabsContent value="tab-2">
    <div class="rounded-md border p-4">
      <h3 class="mb-2 font-semibold">Password</h3>
      <p class="text-muted-foreground text-sm">
        Change your password here. You will be logged out after changing your
        password.
      </p>
    </div>
  </TabsContent>
</Tabs>
```

## Installation

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

## Usage

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

```astro
<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab-1"> Content for tab 1 </TabsContent>
  <TabsContent value="tab-2"> Content for tab 2 </TabsContent>
</Tabs>
```

## Composition

Use the following composition to build `Tabs`:

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

## Examples

### Line

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

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

<Tabs defaultValue="overview" class="w-full max-w-md">
  <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 side navigation patterns.

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

<Tabs defaultValue="account" orientation="vertical" class="w-full max-w-sm">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
</Tabs>
```

### Disabled

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

<Tabs defaultValue="account" class="w-full max-w-sm">
  <TabsList class="grid w-full grid-cols-2">
    <TabsTrigger value="home">Home</TabsTrigger>
    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
  </TabsList>
</Tabs>
```

### Grid

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

<Tabs defaultValue="account" class="w-full max-w-sm">
  <TabsList class="grid w-full grid-cols-3">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="team">Team</TabsTrigger>
  </TabsList>
</Tabs>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/tabs) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/tabs/README.md) for more information on interactivity.