---
title: "Tabs"
description: "A flexible, accessible component for organizing content into tabbed panels. Supports icons, customization, and multiple visual variants."
source: "Equality"
---
import { TabsDemo } from "@demo/components/demo/tabs";

## Overview

---

The `Tabs` component provides a clean and accessible way to organize content into multiple panels. Built on top of Radix UI primitives, it includes smooth animations for tab switching and supports icons, custom styling, and different background variants.

The component automatically manages the active tab state and provides a smooth animated indicator that follows the active tab.

## Usage

---

Import the component from the Equality UI library:

```tsx
import { Tabs } from "@eqtylab/equality";
```

Basic usage requires an `id` and an array of `items`:

```tsx
<Tabs
  id="my-tabs"
  items={[
    {
      label: "Tab 1",
      value: "tab1",
      content: <div>Content for Tab 1</div>,
    },
    {
      label: "Tab 2",
      value: "tab2",
      content: <div>Content for Tab 2</div>,
    },
  ]}
/>
```

## Variants

---

### Default

The default variant uses a transparent background with an animated underline indicator:

<TabsDemo client:only="react" />

#### Example

```tsx
<Tabs
  id="default-tabs"
  items={[
    {
      label: "Declarations",
      value: "declarations",
      content: <div>Declarations Content</div>,
    },
    {
      label: "Reviews",
      value: "reviews",
      content: <div>Reviews Content</div>,
    },
  ]}
/>
```

### With icons

Add icons to tabs by including the `icon` property in each item. Icons can be provided as strings (icon name from Lucide React) or React elements:

<TabsDemo client:only="react" variant="with-icons" />

#### Example

```tsx
<Tabs
  id="with-icons-tabs"
  items={[
    {
      label: "Declarations",
      value: "declarations",
      icon: "Pen",
      content: <div>Declarations Content</div>,
    },
    {
      label: "Reviews",
      value: "reviews",
      icon: "Eye",
      content: <div>Reviews Content</div>,
    },
  ]}
/>
```

### With Fill

Use `tabsListBackground="filled"` to apply a filled background style to the tabs list. The active tab will have a filled indicator:

<TabsDemo client:only="react" variant="with-active-fill" />

#### Example

```tsx
<Tabs
  id="with-active-fill-tabs"
  tabsListBackground="filled"
  items={[
    {
      label: "Implementation",
      value: "implementation",
      content: <div>Implementation Content</div>,
    },
    {
      label: "Monitoring",
      value: "monitoring",
      content: <div>Monitoring Content</div>,
    },
    {
      label: "Report",
      value: "report",
      content: <div>Report Content</div>,
    },
  ]}
/>
```

### With Fill and Icons

Combine icons with the filled background variant for a more prominent tab design:

<TabsDemo client:only="react" variant="with-icons-and-active-fill" />

#### Example

```tsx
<Tabs
  id="with-icons-and-active-fill-tabs"
  tabsListBackground="filled"
  items={[
    {
      label: "Implementation",
      value: "implementation",
      icon: "Shield",
      content: <div>Implementation Content</div>,
    },
    {
      label: "Monitoring",
      value: "monitoring",
      icon: "Activity",
      content: <div>Monitoring Content</div>,
    },
    {
      label: "Report",
      value: "report",
      icon: "FileChartLine",
      content: <div>Report Content</div>,
    },
  ]}
/>
```

### With suffix

Use the `suffix` property to render any React component after a tab's label. This is useful for badges, counts, or status indicators. The suffix works alongside icons and both background variants:

<TabsDemo client:only="react" variant="with-suffix" />

#### Example

```tsx
<Tabs
  id="with-suffix-tabs"
  items={[
    {
      label: "Declarations",
      value: "declarations",
      suffix: (
        <Badge variant="neutral" size="sm">
          12
        </Badge>
      ),
      content: <div>Declarations Content</div>,
    },
    {
      label: "Reviews",
      value: "reviews",
      suffix: (
        <Badge variant="primary" size="sm">
          3
        </Badge>
      ),
      content: <div>Reviews Content</div>,
    },
  ]}
/>
```

## Props

---

| Name                 | Description                                                              | Type                      | Default       | Required |
| -------------------- | ------------------------------------------------------------------------ | ------------------------- | ------------- | -------- |
| `id`                 | Unique identifier for the tabs instance, used for the animated indicator | `string`                  | -             | ✅       |
| `items`              | Array of tab items (see TabItem structure below)                         | `Array<TabItem>`          | -             | ✅       |
| `defaultValue`       | The value of the tab that should be active by default                    | `string`                  | First item    | ❌       |
| `tabsListBackground` | Background style for the tabs list                                       | `transparent`, `filled`   | `transparent` | ❌       |
| `onValueChange`      | Callback fired when the active tab changes                               | `(value: string) => void` | -             | ❌       |

### TabItem Structure

Each item in the `items` array should have the following structure:

| Name      | Description                                                  | Type                           | Default | Required |
| --------- | ------------------------------------------------------------ | ------------------------------ | ------- | -------- |
| `label`   | Text label displayed on the tab trigger                      | `string`                       | -       | ✅       |
| `value`   | Unique value that identifies this tab                        | `string`                       | -       | ✅       |
| `icon`    | Icon to display alongside the label (Lucide name or element) | `React.ReactElement`, `string` | -       | ❌       |
| `suffix`  | Content rendered after the label (e.g. a badge or count)     | `React.ReactNode`              | -       | ❌       |
| `content` | Content to display when this tab is active                   | `React.ReactNode`              | -       | ✅       |