# Tabs

Segmented and subtle tabs with a moving selection indicator.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).







## Preview [#preview]

### Default and compact [#default-and-compact]

<ComponentPreview src="examples/components/tabs.tsx">
  <TabsDemo />
</ComponentPreview>

### Subtle [#subtle]

<ComponentPreview src="examples/components/tabs-subtle.tsx">
  <TabsSubtleDemo />
</ComponentPreview>

## Installation [#installation]

<CodeBlockCommand __npm__="`npx shadcn@latest add ${SITE.URL}/r/tabs.json`" __pnpm__="`pnpm dlx shadcn@latest add ${SITE.URL}/r/tabs.json`" __yarn__="`yarn dlx shadcn@latest add ${SITE.URL}/r/tabs.json`" __bun__="`bunx shadcn@latest add ${SITE.URL}/r/tabs.json`" />

## Usage [#usage]

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

<Tabs variant="subtle" defaultValue="overview">
  <TabsList aria-label="Project">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="activity">Activity content</TabsContent>
</Tabs>;
```

## API Reference [#api-reference]

`variant`: default (segmented) or subtle. Root accepts Base UI `value`, `defaultValue`, `onValueChange`, and `orientation`. Triggers support `disabled`. The shared indicator follows selection; fluid hover follows the pointer. SizeProvider controls density. Base UI manages keyboard activation and panel relationships. Reduced motion removes the indicator travel.