# Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

> 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).





<ComponentPreview name="tabs-demo">
  <div className="flex items-center gap-4 py-8 w-full max-w-md mx-auto justify-center">
    <Tabs defaultValue="account" className="w-full">
      <TabsList>
        <TabsTrigger value="account">
          Account
        </TabsTrigger>

        <TabsTrigger value="password">
          Password
        </TabsTrigger>
      </TabsList>

      <TabsContent value="account" className="p-4 border mt-2">
        Make changes to your account here.
      </TabsContent>

      <TabsContent value="password" className="p-4 border mt-2">
        Change your password here.
      </TabsContent>
    </Tabs>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/tabs.json"
```

## Usage [#usage]

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

export function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="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>
  )
}
```

## Examples [#examples]

### Icons [#icons]

<ComponentPreview name="tabs-icons">
  <div className="flex items-center gap-4 py-8 w-full max-w-md mx-auto justify-center">
    <Tabs defaultValue="account" className="w-full">
      <TabsList>
        <TabsTrigger value="account">
          <User className="size-4" />

          Account
        </TabsTrigger>

        <TabsTrigger value="password">
          <Lock className="size-4" />

          Password
        </TabsTrigger>

        <TabsTrigger value="settings">
          <Settings className="size-4" />

          Settings
        </TabsTrigger>
      </TabsList>

      <TabsContent value="account" className="p-4 border mt-2">
        Manage your profile settings.
      </TabsContent>

      <TabsContent value="password" className="p-4 border mt-2">
        Update your password securely.
      </TabsContent>

      <TabsContent value="settings" className="p-4 border mt-2">
        Configure application preferences.
      </TabsContent>
    </Tabs>
  </div>
</ComponentPreview>

### Icon Only [#icon-only]

<ComponentPreview name="tabs-icon-only">
  <div className="flex items-center gap-4 py-8 w-full max-w-md mx-auto justify-center">
    <Tabs defaultValue="grid">
      <TabsList>
        <TabsTrigger value="grid" aria-label="Grid view">
          <LayoutGrid className="size-4" />
        </TabsTrigger>

        <TabsTrigger value="list" aria-label="List view">
          <List className="size-4" />
        </TabsTrigger>

        <TabsTrigger value="table" aria-label="Table view">
          <TableIcon className="size-4" />
        </TabsTrigger>
      </TabsList>

      <TabsContent value="grid" className="p-4 border mt-2 text-sm text-center text-muted-foreground">
        Grid View
      </TabsContent>

      <TabsContent value="list" className="p-4 border mt-2 text-sm text-center text-muted-foreground">
        List View
      </TabsContent>

      <TabsContent value="table" className="p-4 border mt-2 text-sm text-center text-muted-foreground">
        Table View
      </TabsContent>
    </Tabs>
  </div>
</ComponentPreview>

### Full Width [#full-width]

<ComponentPreview name="tabs-full-width">
  <div className="flex items-center gap-4 py-8 w-full max-w-md mx-auto justify-center">
    <Tabs defaultValue="overview" className="w-full">
      <TabsList className="w-full">
        <TabsTrigger value="overview" className="flex-1">
          Overview
        </TabsTrigger>

        <TabsTrigger value="analytics" className="flex-1">
          Analytics
        </TabsTrigger>

        <TabsTrigger value="reports" className="flex-1">
          Reports
        </TabsTrigger>
      </TabsList>

      <TabsContent value="overview" className="p-4 border mt-2">
        System overview dashboard.
      </TabsContent>

      <TabsContent value="analytics" className="p-4 border mt-2">
        Detailed analytics metrics.
      </TabsContent>

      <TabsContent value="reports" className="p-4 border mt-2">
        Downloadable weekly reports.
      </TabsContent>
    </Tabs>
  </div>
</ComponentPreview>

### With Form [#with-form]

<ComponentPreview name="tabs-with-form">
  <div className="flex items-center gap-4 py-8 w-full max-w-md mx-auto justify-center">
    <Tabs defaultValue="login" className="w-full">
      <TabsList className="w-full grid grid-cols-2">
        <TabsTrigger value="login">
          Login
        </TabsTrigger>

        <TabsTrigger value="register">
          Register
        </TabsTrigger>
      </TabsList>

      <TabsContent value="login" className="border p-6 mt-2 flex flex-col gap-4">
        <div>
          <h3 className="text-lg font-medium">
            Welcome back
          </h3>

          <p className="text-sm text-muted-foreground">
            Enter your credentials to login.
          </p>
        </div>

        <div className="grid gap-2">
          <Label htmlFor="email">
            Email
          </Label>

          <Input id="email" type="email" placeholder="m@example.com" />
        </div>

        <div className="grid gap-2">
          <Label htmlFor="password">
            Password
          </Label>

          <Input id="password" type="password" />
        </div>

        <Button className="w-full mt-2">
          Sign in
        </Button>
      </TabsContent>

      <TabsContent value="register" className="border p-6 mt-2 flex flex-col gap-4">
        <div>
          <h3 className="text-lg font-medium">
            Create an account
          </h3>

          <p className="text-sm text-muted-foreground">
            Sign up for a new account.
          </p>
        </div>

        <div className="grid gap-2">
          <Label htmlFor="new-email">
            Email
          </Label>

          <Input id="new-email" type="email" placeholder="m@example.com" />
        </div>

        <div className="grid gap-2">
          <Label htmlFor="new-password">
            Password
          </Label>

          <Input id="new-password" type="password" />
        </div>

        <Button className="w-full mt-2">
          Sign up
        </Button>
      </TabsContent>
    </Tabs>
  </div>
</ComponentPreview>

### Disabled [#disabled]

<ComponentPreview name="tabs-disabled">
  <div className="flex items-center gap-4 py-8 w-full max-w-md mx-auto justify-center">
    <Tabs defaultValue="music" className="w-full">
      <TabsList>
        <TabsTrigger value="music">
          Music
        </TabsTrigger>

        <TabsTrigger value="podcasts">
          Podcasts
        </TabsTrigger>

        <TabsTrigger value="live">
          Live
        </TabsTrigger>
      </TabsList>

      <TabsContent value="music" className="p-4 border mt-2">
        Listen to your favorite songs.
      </TabsContent>

      <TabsContent value="podcasts" className="p-4 border mt-2">
        Discover new podcasts and shows.
      </TabsContent>

      <TabsContent value="live" className="p-4 border mt-2">
        Live radio stations.
      </TabsContent>
    </Tabs>
  </div>
</ComponentPreview>

### Vertical [#vertical]

<ComponentPreview name="tabs-vertical">
  <div className="flex items-start py-8 w-full max-w-md mx-auto justify-center">
    <Tabs defaultValue="account" orientation="vertical" className="w-full">
      <TabsList>
        <TabsTrigger value="account">
          Account
        </TabsTrigger>

        <TabsTrigger value="password">
          Password
        </TabsTrigger>

        <TabsTrigger value="settings">
          Settings
        </TabsTrigger>

        <TabsTrigger value="billing">
          Billing
        </TabsTrigger>
      </TabsList>

      <TabsContent value="account" className="p-4 border mt-0 flex-1">
        <h3 className="font-medium text-lg">
          Account
        </h3>

        <p className="text-sm text-muted-foreground mt-2">
          Manage your account details here.
        </p>
      </TabsContent>

      <TabsContent value="password" className="p-4 border mt-0 flex-1">
        <h3 className="font-medium text-lg">
          Password
        </h3>

        <p className="text-sm text-muted-foreground mt-2">
          Change your password here.
        </p>
      </TabsContent>

      <TabsContent value="settings" className="p-4 border mt-0 flex-1">
        <h3 className="font-medium text-lg">
          Settings
        </h3>

        <p className="text-sm text-muted-foreground mt-2">
          Update your preferences.
        </p>
      </TabsContent>

      <TabsContent value="billing" className="p-4 border mt-0 flex-1">
        <h3 className="font-medium text-lg">
          Billing
        </h3>

        <p className="text-sm text-muted-foreground mt-2">
          View your billing history.
        </p>
      </TabsContent>
    </Tabs>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Tabs` component extends `radix-ui` Tabs attributes and adds the following:

| Component  | Prop                      | Type     | Description                                                                 |
| ---------- | ------------------------- | -------- | --------------------------------------------------------------------------- |
| `TabsList` | `indicatorClassName`      | `string` | Custom classes for the animated background indicator.                       |
| `TabsList` | `hoverIndicatorClassName` | `string` | Custom classes for the animated background indicator when a tab is hovered. |