# Tabs (/docs/tabs)

A Base UI tab set with keyboard navigation and an animated active indicator.

## Install

```bash
npx shadcn@latest add https://4af.selfsimilar.dev/r/tabs.json
```

## Usage

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

<Tabs defaultValue="account">
  <TabsList>
    <TabsTab value="account">Account</TabsTab>
  </TabsList>
</Tabs>

<Tabs variant="pill" size="sm" defaultValue="account">
  <TabsList maxWidth={280}>
    <TabsTab value="account">Account</TabsTab>
    <TabsTab value="notifications">Notifications</TabsTab>
    <TabsTab value="billing">Billing</TabsTab>
    <TabsTab value="team">Team members</TabsTab>
    <TabsTab value="security">Security</TabsTab>
  </TabsList>
</Tabs>
```

## API

**Main exports:** `Tabs`, `TabsList`, `TabsTab`, `TabsCount`, `TabsPanel`

Base UI tabs with a travelling Motion indicator; `segment`, `pill`, and `underline` variants; an
`appearance` for segment and pill; and two sizes.

| `appearance` | Track and selected chip |
| --- | --- |
| `default` | Muted track; raised `surface` chip with a hairline. |
| `solid` | `border` track with a borderless `background` chip. |
| `outline` | Bordered, unfilled track; `bg-muted` fill under the selected tab. Same heights as `default`. |

`underline` ignores `appearance`. The `solid` boolean is deprecated: `solid` maps to
`appearance="solid"`, and an explicit `appearance` wins over it.

| Variant | Outlined geometry |
| --- | --- |
| `segment` | Fill inset 3px from the border. 34px (`md`) / 30px (`sm`) tracks, the Input and Select heights; 8px corners around 4px fills (`md`), 7px around 3px (`sm`). |
| `pill` | Same padding as the filled pill; the tabs give up 1px of vertical padding to the border. Fully rounded. |

`TabsCount` renders a dim, tabular count after a tab's label, in any variant:

```tsx
<TabsTab value="included">
  Included <TabsCount>3</TabsCount>
</TabsTab>
```

`size` is `md` by default. `sm` uses a smaller type step and tighter padding, with a 32px pill
track. Segment corners step down with it, from an 8px track around 6px tabs to a 7px track around
5px tabs. Pill tabs are fully rounded, and underline tabs round only their top corners.

## Scrolling and edge fades

Set `maxWidth` on `TabsList` to enable a horizontally scrolling bar in any variant.
Use a number for pixels (`maxWidth={280}`) or a CSS length (`maxWidth="20rem"`).
The bar never grows past its parent's width, so give it a parent with a definite width.

An edge fades with a tapered blur while more tabs are hidden on that side, including the track
and the underline variant's rule. Touch and trackpad scrolling work natively, with the scrollbar
hidden. Clicking a tab in the half of the bar with more hidden content scrolls it toward the
centre. Keyboard focus, the initial selection, and controlled selection changes also bring hidden
tabs into view. Under reduced motion the scrolling is instant. Focus rings sit inside the tabs so
they aren't clipped. Scrolling applies to horizontal tab lists only.