Components
Tabs
A set of layered sections of content — known as tab panels — that display one panel at a time, built on Radix UI.
Install
npx shadcn@latest add https://atomx.acau.net/r/tabs.jsonUsage
Wrap related panels with Tabs, list their triggers in TabsList, and render each panel in a TabsContent. Use the controlled value prop to drive selection from your own state, or defaultValue for uncontrolled. Tabs are keyboard-navigable by default.
<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">Account panel</TabsContent>
<TabsContent value="password">Password panel</TabsContent>
</Tabs>Preview
Account / Password
Manage your account settings and personal information.
Props
Tabs extends React.ComponentProps<typeof TabsPrimitive.Root>.
| Prop | Type | Notes |
|---|---|---|
value | string | Controlled selected tab value. |
defaultValue | string | Initial selected tab when uncontrolled. |
onValueChange | (value: string) => void | Fired when the selected tab changes. |
orientation | "horizontal" | "vertical" | Layout orientation. Defaults to "horizontal". |
activationMode | "automatic" | "manual" | Whether triggers activate on focus or require click/Enter. Defaults to "automatic". |
TabsTrigger extends React.ComponentProps<typeof TabsPrimitive.Trigger>.
| Prop | Type | Notes |
|---|---|---|
value | string | The value this trigger activates. Required. |
disabled | boolean | Disables the trigger. |
TabsContent extends React.ComponentProps<typeof TabsPrimitive.Content>.
| Prop | Type | Notes |
|---|---|---|
value | string | The value this panel is shown for. Required. |
forceMount | boolean | Always mount the panel; useful for animations. |