Tabs
Switch between panels of related content.
Account settings panel.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/tabs.jsonUsage
import { Tabs, TabsList, TabsTab, TabsPanel } from "@/components/ui/tabs";
<Tabs value={tab} onValueChange={setTab}>
<TabsList>
<TabsTab value="overview">Overview</TabsTab>
<TabsTab value="activity">Activity</TabsTab>
</TabsList>
<TabsPanel value="overview">…</TabsPanel>
<TabsPanel value="activity">…</TabsPanel>
</Tabs>Props
Root: value / defaultValue, onValueChange, orientation. Tab:
disabled. Panels stay mounted only while selected by default; pass
keepMounted to a panel to preserve its state.
Accessibility
- Base UI Tabs: one Tab stop for the list, arrow keys move between tabs,
proper
tablist/tab/tabpanelroles and wiring. - Use tabs for peer content; for progressive disclosure inside a page prefer an Accordion.