# Tabs

Switches between views of the same context.

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

<Tabs defaultValue="general">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="team">Team</TabsTrigger>
    <TabsTrigger value="billing">Billing</TabsTrigger>
  </TabsList>
  <TabsContent value="general">Company name, logo and time zone.</TabsContent>
  <TabsContent value="team">8 members, 2 pending invites.</TabsContent>
  <TabsContent value="billing">Next invoice on Nov 1, 2026.</TabsContent>
</Tabs>
```

## Usage

### What you provide
- `defaultValue` (or `value` + `onValueChange`), one `TabsTrigger` and one `TabsContent` per `value`.
- Two to six tabs with one- or two-word labels.
- To move between pages (URLs), use navigation links, not Tabs.

## Accessibility

- Use tabs only to switch groups of content on the same page, when a simpler layout won't do; on small screens consider stacking the content.
- `Tab` lands on the active tab; `←` / `→` move between tabs and wrap from last to first; the next `Tab` goes into the open panel.
- Panels open automatically as the arrows move (the recommended mode). Manual activation (`activationMode="manual"`, then `Enter` / `Space`) is possible but not recommended.
- Screen readers hear the tab name, the tab role, its position (1 of 3) and whether it is selected.

_Adapted from Magoo 1.6.0 by Marcelo Sales: [Tabs](https://magoo.cc/en/components/hidden-elements/tabs.html) (`abas`). Magoo is educational guidance; test the behavior in your implementation._

## API

Install:

```bash
npx @aline-aroucha/pui add tabs
```

```tsx
<Tabs>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsContent />
</Tabs>
```

### Tabs

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Controlled active tab. |
| `defaultValue` | `string` | — | Initial tab when uncontrolled. |
| `onValueChange` | `(value: string) => void` | — | Runs when the active tab changes. |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Arrow keys follow the orientation. |
| `activationMode` | `"automatic" \| "manual"` | `"automatic"` | Automatic opens the panel as arrows move (recommended). |

### TabsList

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "line"` | `"default"` | Pill or underline style. |

### TabsTrigger

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | Matches a TabsContent value. |
| `disabled` | `boolean` | `false` | Tab can't be selected. |

### TabsContent

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | Matches a TabsTrigger value. |

## Related pages

- [Select](https://aline-aroucha.github.io/pui/components/select.html)
- [Card](https://aline-aroucha.github.io/pui/components/card.html)

---
PUI documentation · https://aline-aroucha.github.io/pui/components/tabs.html