008
Tabs
NavigationComponents published through the registry.
Active: work
Customize
Disabled
Scramble
Code
<Tabs defaultValue="work">
<TabsList aria-label="Sections">
<Tab value="work">Work</Tab>
<Tab value="play">Play</Tab>
<Tab value="about">About</Tab>
</TabsList>
<TabsPanel value="work">…</TabsPanel>
<TabsPanel value="play">…</TabsPanel>
<TabsPanel value="about">…</TabsPanel>
</Tabs>Install
npx shadcn@latest add https://components.haedong.dev/r/tabs.json
Props
Tabs props below. TabsList takes aria-label; Tab and TabsPanel take value plus native button / div props. Only the selected panel is rendered.
| Prop | Type | Description |
|---|---|---|
| value / defaultValue | string | Selected tab (controlled / uncontrolled). |
| onValueChange | (value: string) => void | Called when a tab is selected by click or keyboard. |
| scramble | boolean | Replay the character-scramble decode on tab labels on hover. Defaults to true. |
| Tab.disabled | boolean | Skipped by arrow keys; dims to 40%. |
| className | string | Extra classes on any of the four elements. |