shadcn.io is not affiliated with official shadcn/ui
Overview
Analytics
Reports
Settings
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.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/tabs.jsonnpx shadcn@latest add https://kit.dev/r/aria/tabs.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/tabs.jsonyarn shadcn@latest add https://kit.dev/r/aria/tabs.jsonInstall the following dependencies:
bun add react-aria-components tailwind-variantsnpm install react-aria-components tailwind-variantspnpm add react-aria-components tailwind-variantsyarn add react-aria-components tailwind-variantsCopy and paste the following code into your project.
"use client";
import type React from "react";
import {
TabList as TabListPrimitive,
TabPanel as TabPanelPrimitive,
Tab as TabPrimitive,
Tabs as TabsPrimitive,
} from "react-aria-components";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
const tabsRootClassName = cn(
"cn-tabs group/tabs flex data-horizontal:flex-col"
);
export const Tabs = (props: React.ComponentProps<typeof TabsPrimitive>) => {
const { className, orientation = "horizontal", ...rest } = props;Update the import paths to match your project setup.
Anatomy
Tabs
├── TabsList
│ └── TabsIndicator
├── TabsTrigger
└── TabsContentUsage
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";<Tabs className="w-[400px]" defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="analytics">Analytics</TabsTrigger>
<TabsTrigger value="reports">Reports</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<Card>
<CardHeader>
<CardTitle>Overview</CardTitle>
<CardDescription>
View your key metrics and recent project activity. Track progress
across all your active projects.
</CardDescription>
</CardHeader>
<CardContent className="text-muted-foreground text-sm">
You have 12 active projects and 3 pending tasks.
</CardContent>
</Card>
</TabsContent>
<TabsContent value="analytics">
<Card>
<CardHeader>
<CardTitle>Analytics</CardTitle>
<CardDescription>
Track performance and user engagement metrics. Monitor trends and
identify growth opportunities.
</CardDescription>
</CardHeader>
<CardContent className="text-muted-foreground text-sm">
Page views are up 25% compared to last month.
</CardContent>
</Card>
</TabsContent>
<TabsContent value="reports">
<Card>
<CardHeader>
<CardTitle>Reports</CardTitle>
<CardDescription>
Generate and download your detailed reports. Export data in multiple
formats for analysis.
</CardDescription>
</CardHeader>
<CardContent className="text-muted-foreground text-sm">
You have 5 reports ready and available to export.
</CardContent>
</Card>
</TabsContent>
<TabsContent value="settings">
<Card>
<CardHeader>
<CardTitle>Settings</CardTitle>
<CardDescription>
Manage your account preferences and options. Customize your
experience to fit your needs.
</CardDescription>
</CardHeader>
<CardContent className="text-muted-foreground text-sm">
Configure notifications, security, and themes.
</CardContent>
</Card>
</TabsContent>
</Tabs>
Accessibility
| Key | Description |
|---|---|
ArrowDown | Move to the next item when orientation is "vertical". |
ArrowUp | Move to the previous item when orientation is "vertical". |
ArrowLeft | Move to the previous item when orientation is "horizontal". |
ArrowRight | Move to the next item when orientation is "horizontal". |
Home | Go to the start. |
End | Go to the end. |
Enter | Activate the focused control. |
Space | Activate the focused control. |
Demos
Line
Use variant="underline" on TabsList for a line style.
Vertical
Use orientation="vertical" for vertical tabs.
Disabled
Disabled tab triggers.
Icons
Tabs with icons.
Rtl
Right-to-left tabs. See the RTL configuration guide for document direction.
API Reference
Tabs
PropType
AttributeType
TabsList
PropType
AttributeType
TabsTrigger
PropType
AttributeType
TabsContent
PropType
AttributeType