Tabs

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

Kobalte

The Tabs component is built on top of Kobalte Tabs, which provides the accessible tab, tablist, and tabpanel primitives with keyboard navigation.

Overview

View your key metrics and recent project activity. Track progress across all your active projects.

You have 12 active projects and 3 pending tasks.

1
import {
2
  Card,
3
  CardContent,
4
  CardDescription,
5
  CardHeader,
6
  CardTitle,
7
} from "~/components/ui/card";
8
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
9

10
export default function TabsDemo() {
11
  return (
12
    <Tabs defaultValue="overview" class="w-[400px]">
13
      <TabsList>
14
        <TabsTrigger value="overview">Overview</TabsTrigger>
15
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
16
        <TabsTrigger value="reports">Reports</TabsTrigger>
17
        <TabsTrigger value="settings">Settings</TabsTrigger>
18
      </TabsList>
19
      <TabsContent value="overview">
20
        <Card>
21
          <CardHeader>
22
            <CardTitle>Overview</CardTitle>
23
            <CardDescription>
24
              View your key metrics and recent project activity. Track progress across all your
25
              active projects.
26
            </CardDescription>
27
          </CardHeader>
28
          <CardContent class="text-muted-foreground text-sm">
29
            You have 12 active projects and 3 pending tasks.
30
          </CardContent>
31
        </Card>
32
      </TabsContent>
33
      <TabsContent value="analytics">
34
        <Card>
35
          <CardHeader>
36
            <CardTitle>Analytics</CardTitle>
37
            <CardDescription>
38
              Track performance and user engagement metrics. Monitor trends and identify growth
39
              opportunities.
40
            </CardDescription>
41
          </CardHeader>
42
          <CardContent class="text-muted-foreground text-sm">
43
            Page views are up 25% compared to last month.
44
          </CardContent>
45
        </Card>
46
      </TabsContent>
47
      <TabsContent value="reports">
48
        <Card>
49
          <CardHeader>
50
            <CardTitle>Reports</CardTitle>
51
            <CardDescription>
52
              Generate and download your detailed reports. Export data in multiple formats for
53
              analysis.
54
            </CardDescription>
55
          </CardHeader>
56
          <CardContent class="text-muted-foreground text-sm">
57
            You have 5 reports ready and available to export.
58
          </CardContent>
59
        </Card>
60
      </TabsContent>
61
      <TabsContent value="settings">
62
        <Card>
63
          <CardHeader>
64
            <CardTitle>Settings</CardTitle>
65
            <CardDescription>
66
              Manage your account preferences and options. Customize your experience to fit your
67
              needs.
68
            </CardDescription>
69
          </CardHeader>
70
          <CardContent class="text-muted-foreground text-sm">
71
            Configure notifications, security, and themes.
72
          </CardContent>
73
        </Card>
74
      </TabsContent>
75
    </Tabs>
76
  );
77
}

Installation

pnpm dlx shadcn@latest add @zaidan/tabs
npx shadcn@latest add @zaidan/tabs
yarn dlx shadcn@latest add @zaidan/tabs
bunx --bun shadcn@latest add @zaidan/tabs

Usage

1
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";

1
<Tabs defaultValue="account" class="w-[400px]">
2
  <TabsList>
3
    <TabsTrigger value="account">Account</TabsTrigger>
4
    <TabsTrigger value="password">Password</TabsTrigger>
5
  </TabsList>
6
  <TabsContent value="account">Make changes to your account here.</TabsContent>
7
  <TabsContent value="password">Change your password here.</TabsContent>
8
</Tabs>

Composition

Use the following composition to build Tabs:

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

Line

Use the variant="line" prop on TabsList for a line style.

1
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
2

3
export default function TabsLine() {
4
  return (
5
    <Tabs defaultValue="overview">
6
      <TabsList variant="line">
7
        <TabsTrigger value="overview">Overview</TabsTrigger>
8
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
9
        <TabsTrigger value="reports">Reports</TabsTrigger>
10
      </TabsList>
11
    </Tabs>
12
  );
13
}

Vertical

Use orientation="vertical" for vertical tabs.

1
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
2

3
export default function TabsVertical() {
4
  return (
5
    <Tabs defaultValue="account" orientation="vertical">
6
      <TabsList>
7
        <TabsTrigger value="account">Account</TabsTrigger>
8
        <TabsTrigger value="password">Password</TabsTrigger>
9
        <TabsTrigger value="notifications">Notifications</TabsTrigger>
10
      </TabsList>
11
    </Tabs>
12
  );
13
}

Disabled

1
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
2

3
export default function TabsDisabled() {
4
  return (
5
    <Tabs defaultValue="home">
6
      <TabsList>
7
        <TabsTrigger value="home">Home</TabsTrigger>
8
        <TabsTrigger value="settings" disabled>
9
          Disabled
10
        </TabsTrigger>
11
      </TabsList>
12
    </Tabs>
13
  );
14
}

Icons

1
import { AppWindow, Code } from "lucide-solid";
2
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
3

4
export default function TabsIcons() {
5
  return (
6
    <Tabs defaultValue="preview">
7
      <TabsList>
8
        <TabsTrigger value="preview">
9
          <AppWindow />
10
          Preview
11
        </TabsTrigger>
12
        <TabsTrigger value="code">
13
          <Code />
14
          Code
15
        </TabsTrigger>
16
      </TabsList>
17
    </Tabs>
18
  );
19
}

API Reference

For primitive props, keyboard behavior, and accessibility details, see the Kobalte Tabs API reference.