About the shadcn/ui Tabs Component
The Tabs component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add tabs` and copy it directly into your project.
Tabs Component — Frequently Asked Questions
How do I sync shadcn Tabs with the URL?
Use `useSearchParams` and router: `<Tabs value={searchParams.get('tab') || 'default'} onValueChange={(v) => router.push('?tab=' + v)}>`. This enables deep linking to tab states.
How do I lazy-load tab content in shadcn?
Wrap `<TabsContent>` children in a conditional render or use React.lazy. Only render expensive content when `value === tabId`.
How do I style the active tab differently?
The active tab uses `data-[state=active]` CSS selector. Add custom Tailwind classes using `data-[state=active]:bg-primary` on `<TabsTrigger>`.