Tabs

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.

import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import {
	Tabs,
	TabsContent,
	TabsList,
	TabsTrigger,
} from "@/components/ui/tabs";

export function TabsDemo() {
	return (
		<Tabs defaultValue="overview" className="w-[400px]">
			<TabsList>
				<TabsTrigger value="overview">Overview</TabsTrigger>
				<TabsTrigger value="analytics">Analytics</TabsTrigger>
				<TabsTrigger value="reports">Reports</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>
		</Tabs>
	);
}

Installation

pnpm dlx shadcn@latest add https://herocn.dev/r/tabs.json

Usage

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

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

Composition

Use the following composition to build Tabs:

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

Examples

Vertical

Use orientation="vertical" for vertical tabs.

Account Settings

Manage your account details, profile information, and connected services.

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

export function TabsVertical() {
	return (
		<Tabs defaultValue="account" orientation="vertical" className="w-[500px]">
			<TabsList>
				<TabsTrigger value="account">Account</TabsTrigger>
				<TabsTrigger value="password">Password</TabsTrigger>
				<TabsTrigger value="notifications">Notifications</TabsTrigger>
			</TabsList>
			<TabsContent value="account">
				<p className="font-medium text-sm">Account Settings</p>
				<p className="mt-1 text-muted-foreground text-sm">
					Manage your account details, profile information, and connected
					services.
				</p>
			</TabsContent>
			<TabsContent value="password">
				<p className="font-medium text-sm">Password & Security</p>
				<p className="mt-1 text-muted-foreground text-sm">
					Update your password and configure two-factor authentication to keep
					your account secure.
				</p>
			</TabsContent>
			<TabsContent value="notifications">
				<p className="font-medium text-sm">Notification Preferences</p>
				<p className="mt-1 text-muted-foreground text-sm">
					Choose how and when you receive email, push, and in-app notifications.
				</p>
			</TabsContent>
		</Tabs>
	);
}

Line

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

View your key metrics and recent project activity. You have 12 active projects and 3 pending tasks.

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

export function TabsLine() {
	return (
		<Tabs defaultValue="overview" className="w-[400px]">
			<TabsList variant="line">
				<TabsTrigger value="overview">Overview</TabsTrigger>
				<TabsTrigger value="analytics">Analytics</TabsTrigger>
				<TabsTrigger value="reports">Reports</TabsTrigger>
			</TabsList>
			<TabsContent value="overview">
				<p className="text-muted-foreground text-sm">
					View your key metrics and recent project activity. You have 12 active
					projects and 3 pending tasks.
				</p>
			</TabsContent>
			<TabsContent value="analytics">
				<p className="text-muted-foreground text-sm">
					Track performance and engagement metrics. Page views are up 25%
					compared to last month.
				</p>
			</TabsContent>
			<TabsContent value="reports">
				<p className="text-muted-foreground text-sm">
					Generate and download detailed reports. You have 5 reports ready and
					available to export.
				</p>
			</TabsContent>
		</Tabs>
	);
}

Vertical Line

Combine variant="line" with orientation="vertical" for a vertical line style.

Account Settings

Manage your account details, profile information, and connected services.

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

export function TabsVerticalLine() {
	return (
		<Tabs defaultValue="account" orientation="vertical" className="w-[500px]">
			<TabsList variant="line">
				<TabsTrigger value="account">Account</TabsTrigger>
				<TabsTrigger value="password">Password</TabsTrigger>
				<TabsTrigger value="notifications">Notifications</TabsTrigger>
			</TabsList>
			<TabsContent value="account">
				<p className="font-medium text-sm">Account Settings</p>
				<p className="mt-1 text-muted-foreground text-sm">
					Manage your account details, profile information, and connected
					services.
				</p>
			</TabsContent>
			<TabsContent value="password">
				<p className="font-medium text-sm">Password & Security</p>
				<p className="mt-1 text-muted-foreground text-sm">
					Update your password and configure two-factor authentication to keep
					your account secure.
				</p>
			</TabsContent>
			<TabsContent value="notifications">
				<p className="font-medium text-sm">Notification Preferences</p>
				<p className="mt-1 text-muted-foreground text-sm">
					Choose how and when you receive email, push, and in-app notifications.
				</p>
			</TabsContent>
		</Tabs>
	);
}

Disabled

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

export function TabsDisabled() {
	return (
		<Tabs defaultValue="home">
			<TabsList>
				<TabsTrigger value="home">Home</TabsTrigger>
				<TabsTrigger value="settings" disabled>
					Disabled
				</TabsTrigger>
			</TabsList>
		</Tabs>
	);
}

Icons

See a live preview of your component as it will appear in the browser.

import { AppWindowIcon, CodeIcon } from "lucide-react";

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

export function TabsIcons() {
	return (
		<Tabs defaultValue="preview" className="w-[400px]">
			<TabsList>
				<TabsTrigger value="preview">
					<AppWindowIcon />
					Preview
				</TabsTrigger>
				<TabsTrigger value="code">
					<CodeIcon />
					Code
				</TabsTrigger>
			</TabsList>
			<TabsContent value="preview">
				<p className="text-muted-foreground text-sm">
					See a live preview of your component as it will appear in the browser.
				</p>
			</TabsContent>
			<TabsContent value="code">
				<p className="text-muted-foreground text-sm">
					View and copy the source code for this component to use in your
					project.
				</p>
			</TabsContent>
		</Tabs>
	);
}

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

نظرة عامة

عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.

لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import {
	Tabs,
	TabsContent,
	TabsList,
	TabsTrigger,
} from "@/components/ui/tabs";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			overview: "Overview",
			analytics: "Analytics",
			reports: "Reports",
			overviewTitle: "Overview",
			overviewDesc:
				"View your key metrics and recent project activity. Track progress across all your active projects.",
			overviewContent: "You have 12 active projects and 3 pending tasks.",
			analyticsTitle: "Analytics",
			analyticsDesc:
				"Track performance and user engagement metrics. Monitor trends and identify growth opportunities.",
			analyticsContent: "Page views are up 25% compared to last month.",
			reportsTitle: "Reports",
			reportsDesc:
				"Generate and download your detailed reports. Export data in multiple formats for analysis.",
			reportsContent: "You have 5 reports ready and available to export.",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			overview: "نظرة عامة",
			analytics: "التحليلات",
			reports: "التقارير",
			overviewTitle: "نظرة عامة",
			overviewDesc:
				"عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.",
			overviewContent: "لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.",
			analyticsTitle: "التحليلات",
			analyticsDesc:
				"تتبع مقاييس الأداء ومشاركة المستخدمين. راقب الاتجاهات وحدد فرص النمو.",
			analyticsContent: "زادت مشاهدات الصفحة بنسبة ٢٥٪ مقارنة بالشهر الماضي.",
			reportsTitle: "التقارير",
			reportsDesc:
				"إنشاء وتنزيل تقاريرك التفصيلية. تصدير البيانات بتنسيقات متعددة للتحليل.",
			reportsContent: "لديك ٥ تقارير جاهزة ومتاحة للتصدير.",
		},
	},
	he: {
		dir: "rtl",
		values: {
			overview: "סקירה כללית",
			analytics: "אנליטיקה",
			reports: "דוחות",
			overviewTitle: "סקירה כללית",
			overviewDesc:
				"הצג את המדדים העיקריים שלך ופעילות הפרויקט האחרונה. עקוב אחר התקדמות בכל הפרויקטים הפעילים שלך.",
			overviewContent: "יש לך 12 פרויקטים פעילים ו-3 משימות ממתינות.",
			analyticsTitle: "אנליטיקה",
			analyticsDesc:
				"עקוב אחר ביצועים ומדדי מעורבות משתמשים. עקוב אחר מגמות וזהה הזדמנויות צמיחה.",
			analyticsContent: "צפיות בדף עלו ב-25% בהשוואה לחודש שעבר.",
			reportsTitle: "דוחות",
			reportsDesc:
				"צור והורד את הדוחות המפורטים שלך. ייצא נתונים בפורמטים מרובים לניתוח.",
			reportsContent: "יש לך 5 דוחות מוכנים וזמינים לייצוא.",
		},
	},
};

export function TabsRtl() {
	const { dir, t, language } = useTranslation(translations, "ar");

	return (
		<Tabs
			defaultValue="overview"
			className="w-full max-w-sm"
			lang={language}
			dir={dir}
		>
			<TabsList dir={dir}>
				<TabsTrigger value="overview">{t.overview}</TabsTrigger>
				<TabsTrigger value="analytics">{t.analytics}</TabsTrigger>
				<TabsTrigger value="reports">{t.reports}</TabsTrigger>
			</TabsList>
			<TabsContent value="overview">
				<Card dir={dir}>
					<CardHeader>
						<CardTitle>{t.overviewTitle}</CardTitle>
						<CardDescription>{t.overviewDesc}</CardDescription>
					</CardHeader>
					<CardContent className="text-muted-foreground text-sm">
						{t.overviewContent}
					</CardContent>
				</Card>
			</TabsContent>
			<TabsContent value="analytics">
				<Card dir={dir}>
					<CardHeader>
						<CardTitle>{t.analyticsTitle}</CardTitle>
						<CardDescription>{t.analyticsDesc}</CardDescription>
					</CardHeader>
					<CardContent className="text-muted-foreground text-sm">
						{t.analyticsContent}
					</CardContent>
				</Card>
			</TabsContent>
			<TabsContent value="reports">
				<Card dir={dir}>
					<CardHeader>
						<CardTitle>{t.reportsTitle}</CardTitle>
						<CardDescription>{t.reportsDesc}</CardDescription>
					</CardHeader>
					<CardContent className="text-muted-foreground text-sm">
						{t.reportsContent}
					</CardContent>
				</Card>
			</TabsContent>
		</Tabs>
	);
}

API Reference

See the Base UI Tabs documentation.