Tabs
Tabbed navigation for switching between content panels. Supports single active tab with controlled or uncontrolled state.
Installation
$ npx shadcn@latest add tabsPreview
Dashboard Overview
Welcome back. Your system is running smoothly with 99.99% uptime across all services.
Usage (React/TSX)
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
export default function Dashboard() {
return (
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<p>Dashboard overview content</p>
</TabsContent>
<TabsContent value="settings">
<p>Settings panel content</p>
</TabsContent>
</Tabs>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | — | The initially active tab value. |
| children | ReactNode | — | TabsList, TabsTrigger, and TabsContent children. |