---
title: "Tabs"
description: "Tabbed navigation with list, triggers, and content panels."
section: "Libraries"
group: "UI components"
order: 521
---

## Usage

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@aeontel/ui";

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="runs">Runs</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview panel.</TabsContent>
  <TabsContent value="runs">Runs list.</TabsContent>
</Tabs>;
```

## Exports

### `Tabs`

Tabs root container.

```ts
Tabs(props: TabsPrimitive.Root.Props): JSX.Element
```

### `TabsList`

List of tab triggers.

```ts
TabsList(props: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): JSX.Element
```

**Props**

| Prop       | Type                                       | Default     | Description |
| ---------- | ------------------------------------------ | ----------- | ----------- |
| `variant?` | `"line" \| "default" \| null \| undefined` | `"default"` |             |

### `TabsTrigger`

Single tab trigger button.

```ts
TabsTrigger(props: TabsPrimitive.Tab.Props): JSX.Element
```

### `TabsContent`

Content panel associated with a tab.

```ts
TabsContent(props: TabsPrimitive.Panel.Props): JSX.Element
```

### `tabsListVariants`

cva variant builder for the tabs list classNames.

```ts
tabsListVariants(config?: { variant?: TabsListVariant; className?: string }): string
```