## Overview [#overview]
The **Tabs** component organises related content into separate panels. It is built on Base UI primitives and supports keyboard navigation, disabled tabs, animated indicators, optional separators, and URL-synced state.
## Usage [#usage]
```tsx
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@tilt-legal/cubitt-components/tabs";
```
```tsx
AccountSettingsBillingAccount contentSettings contentBilling content
```
Provide `paramName` to sync the active tab with the URL.
```tsx
AccountSettingsBillingAccount contentSettings contentBilling content
```
`TabsTrigger` forwards Base UI's polymorphic `render` support. When the trigger renders as something other than a native `
## Examples [#examples]
### Default [#default]
```tsx
import { Card, CardContent } from "@tilt-legal/cubitt-components/card";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@tilt-legal/cubitt-components/tabs";
export default function Component() {
return (
AccountSettingsBillingAccount contentSettings contentBilling content
);
}
```
### Line [#line]
```tsx
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@tilt-legal/cubitt-components/tabs";
export default function Component() {
return (
AccountSettingsBillingAccount contentSettings contentBilling content
);
}
```
### Separator [#separator]
Use `TabsSeparator` inside the default track to separate groups of tabs. The separator fades while the selected pill touches either side of it.
```tsx
import {
Tabs,
TabsContent,
TabsList,
TabsSeparator,
TabsTrigger,
} from "@tilt-legal/cubitt-components/tabs";
export default function Component() {
return (
AccountSettingsBillingAccount contentSettings contentBilling content
);
}
```
### Sizes [#sizes]
```tsx
import {
Tabs,
TabsList,
TabsTrigger,
} from "@tilt-legal/cubitt-components/tabs";
export default function Component() {
return (