import { ChartArea, Codepen, Settings } from "lucide-react";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";
export function TabsDemo() {
return (
<Tabs
defaultValue="settings"
className="*:data-[slot=tabs-content]:text-muted-foreground *:data-[slot=tabs-content]:bg-card w-88 *:data-[slot=tabs-content]:grid *:data-[slot=tabs-content]:h-64 *:data-[slot=tabs-content]:place-items-center *:data-[slot=tabs-content]:rounded-md *:data-[slot=tabs-content]:border *:data-[slot=tabs-content]:[&>svg]:size-10"
>
<TabsList>
<TabsTrigger value="settings">Settings</TabsTrigger>
<TabsTrigger value="deloyments">Deployments</TabsTrigger>
<TabsTrigger value="analytics">Analytics</TabsTrigger>
</TabsList>
<TabsContent value="settings">
<Settings />
</TabsContent>
<TabsContent value="deloyments">
<Codepen />
</TabsContent>
<TabsContent value="analytics">
<ChartArea />
</TabsContent>
</Tabs>
);
}Installation
npx shadcn@latest add @eo-n/tabsUsage
Import all parts and piece them together.
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">Account</TabsContent>
<TabsContent value="password">Password</TabsContent>
</Tabs>Examples
Underline
import { ChartArea, Codepen, Settings } from "lucide-react";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";
export function TabsUnderline() {
return (
<Tabs
defaultValue="settings"
variant="underline"
className="*:data-[slot=tabs-content]:text-muted-foreground w-88 *:data-[slot=tabs-content]:grid *:data-[slot=tabs-content]:h-64 *:data-[slot=tabs-content]:place-items-center *:data-[slot=tabs-content]:rounded-md *:data-[slot=tabs-content]:border *:data-[slot=tabs-content]:[&>svg]:size-10"
>
<TabsList>
<TabsTrigger value="settings">
<Settings />
Settings
</TabsTrigger>
<TabsTrigger value="deloyments">
<Codepen />
Deployments
</TabsTrigger>
<TabsTrigger value="analytics">
<ChartArea />
Analytics
</TabsTrigger>
</TabsList>
<TabsContent value="settings">
<Settings />
</TabsContent>
<TabsContent value="deloyments">
<Codepen />
</TabsContent>
<TabsContent value="analytics">
<ChartArea />
</TabsContent>
</Tabs>
);
}Vertical Orientation
import { Home, MessageSquare, User } from "lucide-react";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";
export function TabsVertical() {
return (
<Tabs
defaultValue="home"
orientation="vertical"
className="*:data-[slot=tabs-content]:text-muted-foreground *:data-[slot=tabs-content]:bg-card w-88 *:data-[slot=tabs-content]:grid *:data-[slot=tabs-content]:w-full *:data-[slot=tabs-content]:place-items-center *:data-[slot=tabs-content]:rounded-md *:data-[slot=tabs-content]:border *:data-[slot=tabs-content]:[&>svg]:size-10"
>
<TabsList className="*:data-[slot=tabs-trigger]:py-10">
<TabsTrigger value="home">
<Home />
</TabsTrigger>
<TabsTrigger value="profile">
<User />
</TabsTrigger>
<TabsTrigger value="messages">
<MessageSquare />
</TabsTrigger>
</TabsList>
<TabsContent value="home">
<Home />
</TabsContent>
<TabsContent value="profile">
<User />
</TabsContent>
<TabsContent value="messages">
<MessageSquare />
</TabsContent>
</Tabs>
);
}Root
The main container component for handling tabs props.
| Prop | Type | Default |
|---|---|---|
variant? | "default" | "underline" | "default" |