Tabs

A flexible, accessible component for organizing content into tabbed panels. Supports icons, customization, and multiple visual variants.

View Markdown

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:

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

Basic usage requires an id and an array of items:

<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:

Example

<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:

Example

<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:

Example

<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:

Example

<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>,
    },
  ]}
/>

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`	-	❌
`content`	Content to display when this tab is active	`React.ReactNode`	-	✅