25
Organizes content into multiple sections with tabbed navigation.
npx neobrutal add tabsimport { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">
Make changes to your account here.
</TabsContent>
<TabsContent value="password">
Change your password here.
</TabsContent>
</Tabs>| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | number | - | The default active tab value when uncontrolled. |
| value | string | number | - | The controlled active tab value. |
| onValueChange | (value: string | number) => void | - | Event handler called when the active tab changes. |
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | number | - | The unique value that associates the trigger with a panel. |
| disabled | boolean | - | When true, prevents the user from interacting with the tab. |
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | number | - | The unique value that associates the panel with a trigger. |
| keepMounted | boolean | - | When true, keeps the panel mounted in the DOM when inactive. |