Tabs
Switches between panels of content sharing the same space.
Sirdar has been live in eu-west for 12 days, serving 82 ms p50 latency.
Install
pnpm dlx shadcn@latest add @namche/tabsUsage
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="metrics">Metrics</TabsTrigger>
</TabsList>
<TabsContent value="overview">Everything at a glance.</TabsContent>
<TabsContent value="metrics">Requests, latency and error rate.</TabsContent>
</Tabs>TabsList takes a variant of default (a bg-muted pill track, the
usual choice) or line, which drops the track for a plain hairline
underline beneath the active tab. Orientation follows Tabs'
orientation="horizontal" | "vertical", which flips the list to a column and
moves the active indicator to the trailing edge.