#Tabs
The Tabs component organizes related content into accessible, switchable panels.
#Usage
Make changes to your account here.
import React from 'react';
import { Tabs } from '@nathan3boss/ui/tabs';
import { ExampleFrame } from '@docs-support/example-frame';
export default () => {
return (
<ExampleFrame width="400px">
<Tabs defaultValue="account">
<Tabs.List>
<Tabs.Trigger value="account">Account</Tabs.Trigger>
<Tabs.Trigger value="password">Password</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account">Make changes to your account here.</Tabs.Content>
<Tabs.Content value="password">Change your password here.</Tabs.Content>
</Tabs>
</ExampleFrame>
);
};#States
Make changes to your account here.
import React from 'react';
import { Tabs } from '@nathan3boss/ui/tabs';
import { ExampleFrame } from '@docs-support/example-frame';
export default () => {
return (
<ExampleFrame width="400px">
<Tabs defaultValue="account">
<Tabs.List>
<Tabs.Trigger value="account">Account</Tabs.Trigger>
<Tabs.Trigger value="password">Password</Tabs.Trigger>
<Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account">Make changes to your account here.</Tabs.Content>
<Tabs.Content value="password">Change your password here.</Tabs.Content>
<Tabs.Content value="notifications">
Adjust alerts, updates, and journey reports here.
</Tabs.Content>
</Tabs>
</ExampleFrame>
);
};#API
#Tabs
| Property | Description | Type | Default Value |
|---|---|---|---|
| className | Merges custom classes into the root container. | string | undefined | - |
| defaultValue | Sets the initial active tab for uncontrolled usage. | string | undefined | - |
| onValueChange | Called whenever the active tab value changes. | ((value: string) => void) | undefined | - |
| value | Controls the active tab value. | string | undefined | - |