Data Display
Forms
Navigation
Tabs
A component for toggling between related panels on the same page.
Tab 1 content
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";
export default function Particle() {
return (
<Tabs defaultValue="tab-1">
<TabsList>
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
<TabsPanel value="tab-1">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 1 content
</p>
</TabsPanel>
<TabsPanel value="tab-2">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 2 content
</p>
</TabsPanel>
<TabsPanel value="tab-3">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 3 content
</p>
</TabsPanel>
</Tabs>
);
}
Installation
pnpm dlx cnippet@latest add tabs
Usage
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"<Tabs defaultValue="tab-1">
<TabsList>
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
<TabsPanel value="tab-1">Tab 1 content</TabsPanel>
<TabsPanel value="tab-2">Tab 2 content</TabsPanel>
<TabsPanel value="tab-3">Tab 3 content</TabsPanel>
</Tabs>Examples
Underline Variant
Tab 1 content
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";
export default function Particle() {
return (
<Tabs defaultValue="tab-1">
<div className="border-b">
<TabsList variant="underline">
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
</div>
<TabsPanel value="tab-1">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 1 content
</p>
</TabsPanel>
<TabsPanel value="tab-2">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 2 content
</p>
</TabsPanel>
<TabsPanel value="tab-3">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 3 content
</p>
</TabsPanel>
</Tabs>
);
}
Vertical Orientation
Tab 1 content
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";
export default function Particle() {
return (
<Tabs className="w-full" defaultValue="tab-1" orientation="vertical">
<TabsList>
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
<TabsPanel value="tab-1">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 1 content
</p>
</TabsPanel>
<TabsPanel value="tab-2">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 2 content
</p>
</TabsPanel>
<TabsPanel value="tab-3">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 3 content
</p>
</TabsPanel>
</Tabs>
);
}
Underline with Vertical Orientation
Tab 1 content
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";
export default function Particle() {
return (
<Tabs
className="w-full flex-row"
defaultValue="tab-1"
orientation="vertical"
>
<div className="border-s">
<TabsList variant="underline">
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
</div>
<TabsPanel value="tab-1">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 1 content
</p>
</TabsPanel>
<TabsPanel value="tab-2">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 2 content
</p>
</TabsPanel>
<TabsPanel value="tab-3">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 3 content
</p>
</TabsPanel>
</Tabs>
);
}