Tabs

Account

Make changes to your account here. Click save when you're done.

Password

Change your password here. You will be logged out after changing your password.

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

npx shadcn@latest add @fulldev/tabs

Usage

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

<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:

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

Examples

Line

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

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

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

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

---
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 for more information on props. See the data-slot docs for more information on interactivity.

Sidebar

Search