HeroUI

TabsUpdated

Tabs organize content into multiple sections and allow users to navigate between them.

FigmaStorybookReact AriaSourceStyles source

Import

import { Tabs } from '@heroui/react';

Usage

View your project overview and recent activity.

"use client";

import {Tab, TabIndicator, TabList, TabListWrapper, TabPanel, TabsRoot} from "@heroui/react";

export function Basic() {
  return (
    <TabsRoot className="w-full max-w-md">
      <TabListWrapper>
        <TabList aria-label="Options">
          <Tab id="overview">
            Overview
            <TabIndicator />
          </Tab>
          <Tab id="analytics">
            Analytics
            <TabIndicator />
          </Tab>
          <Tab id="reports">
            Reports
            <TabIndicator />
          </Tab>
        </TabList>
      </TabListWrapper>
      <TabPanel className="pt-4" id="overview">
        <p>View your project overview and recent activity.</p>
      </TabPanel>
      <TabPanel className="pt-4" id="analytics">
        <p>Track your metrics and analyze performance data.</p>
      </TabPanel>
      <TabPanel className="pt-4" id="reports">
        <p>Generate and download detailed reports.</p>
      </TabPanel>
    </TabsRoot>
  );
}

Anatomy

Import the Tabs component and access all parts using dot notation.

import { Tabs } from '@heroui/react';

export default () => (
  <Tabs.Root>
    <Tabs.ListWrapper>
      <Tabs.List aria-label="Options">
        <Tabs.Tab>
          <Tabs.Indicator />
        </Tabs.Tab>
      </Tabs.List>
    </Tabs.ListWrapper>
    <Tabs.Panel/>
  </Tabs.Root>
)

Vertical

Account Settings

Manage your account information and preferences.

"use client";

import {Tab, TabIndicator, TabList, TabListWrapper, TabPanel, TabsRoot} from "@heroui/react";

export function Vertical() {
  return (
    <TabsRoot className="w-full max-w-lg" orientation="vertical">
      <TabListWrapper>
        <TabList aria-label="Vertical tabs">
          <Tab id="account">
            Account
            <TabIndicator />
          </Tab>
          <Tab id="security">
            Security
            <TabIndicator />
          </Tab>
          <Tab id="notifications">
            Notifications
            <TabIndicator />
          </Tab>
          <Tab id="billing">
            Billing
            <TabIndicator />
          </Tab>
        </TabList>
      </TabListWrapper>
      <TabPanel className="px-4" id="account">
        <h3 className="mb-2 font-semibold">Account Settings</h3>
        <p className="text-muted text-sm">Manage your account information and preferences.</p>
      </TabPanel>
      <TabPanel className="px-4" id="security">
        <h3 className="mb-2 font-semibold">Security Settings</h3>
        <p className="text-muted text-sm">
          Configure two-factor authentication and password settings.
        </p>
      </TabPanel>
      <TabPanel className="px-4" id="notifications">
        <h3 className="mb-2 font-semibold">Notification Preferences</h3>
        <p className="text-muted text-sm">Choose how and when you want to receive notifications.</p>
      </TabPanel>
      <TabPanel className="px-4" id="billing">
        <h3 className="mb-2 font-semibold">Billing Information</h3>
        <p className="text-muted text-sm">View and manage your subscription and payment methods.</p>
      </TabPanel>
    </TabsRoot>
  );
}

Disabled Tab

This tab is active and can be selected.

"use client";

import {Tab, TabIndicator, TabList, TabListWrapper, TabPanel, TabsRoot} from "@heroui/react";

export function Disabled() {
  return (
    <TabsRoot className="w-full max-w-md">
      <TabListWrapper>
        <TabList aria-label="TabsRoot with disabled">
          <Tab id="active">
            Active
            <TabIndicator />
          </Tab>
          <Tab isDisabled id="disabled">
            Disabled
            <TabIndicator />
          </Tab>
          <Tab id="available">
            Available
            <TabIndicator />
          </Tab>
        </TabList>
      </TabListWrapper>
      <TabPanel className="pt-4" id="active">
        <p>This tab is active and can be selected.</p>
      </TabPanel>
      <TabPanel className="pt-4" id="disabled">
        <p>This content cannot be accessed.</p>
      </TabPanel>
      <TabPanel className="pt-4" id="available">
        <p>This tab is also available for selection.</p>
      </TabPanel>
    </TabsRoot>
  );
}

Custom Styles

"use client";

import {Tab, TabIndicator, TabList, TabListWrapper, TabsRoot} from "@heroui/react";

export function CustomStyles() {
  return (
    <TabsRoot className="w-full max-w-lg text-center">
      <TabListWrapper>
        <TabList
          aria-label="Options"
          className="*:data-[selected=true]:text-accent-foreground w-fit *:h-6 *:w-fit *:px-3 *:text-sm *:font-normal"
        >
          <Tab id="daily">
            Daily
            <TabIndicator className="bg-accent" />
          </Tab>
          <Tab id="weekly">
            Weekly
            <TabIndicator className="bg-accent" />
          </Tab>
          <Tab id="bi-weekly">
            Bi-Weekly
            <TabIndicator className="bg-accent" />
          </Tab>
          <Tab id="monthly">
            Monthly
            <TabIndicator className="bg-accent" />
          </Tab>
        </TabList>
      </TabListWrapper>
    </TabsRoot>
  );
}

Styling

Passing Tailwind CSS classes

import { Tabs } from '@heroui/react';

function CustomTabs() {
return (
  <Tabs.Root className="w-full max-w-lg text-center">
    <Tabs.ListWrapper>
      <Tabs.List
        aria-label="Options"
        className="*:data-[selected=true]:text-accent-foreground w-fit *:h-6 *:w-fit *:px-3 *:text-sm *:font-normal"
      >
        <Tabs.Tab id="daily">Daily<Tabs.Indicator /></Tabs.Tab>
        <Tabs.Tab id="weekly">Weekly<Tabs.Indicator /></Tabs.Tab>
        <Tabs.Tab id="bi-weekly">Bi-Weekly<Tabs.Indicator /></Tabs.Tab>
        <Tabs.Tab id="monthly">Monthly<Tabs.Indicator /></Tabs.Tab>
      </Tabs.List>
    </Tabs.ListWrapper>
    <Tabs.Panel className="px-4" id="daily">
      <h3 className="mb-2 font-semibold">Daily</h3>
      <p className="text-sm text-gray-600">Manage your daily tasks and goals.</p>
    </Tabs.Panel>
    <Tabs.Panel className="px-4" id="weekly">
      <h3 className="mb-2 font-semibold">Weekly</h3>
      <p className="text-sm text-gray-600">Manage your weekly tasks and goals.</p>
    </Tabs.Panel>
    <Tabs.Panel className="px-4" id="bi-weekly">
      <h3 className="mb-2 font-semibold">Bi-Weekly</h3>
      <p className="text-sm text-gray-600">Manage your bi-weekly tasks and goals.</p>
    </Tabs.Panel>
    <Tabs.Panel className="px-4" id="monthly">
      <h3 className="mb-2 font-semibold">Monthly</h3>
      <p className="text-sm text-gray-600">Manage your monthly tasks and goals.</p>
    </Tabs.Panel>
  </Tabs.Root>
);
}

CSS Classes

The Tabs component uses these CSS classes:

Base Classes

  • .tabs - Base tabs container
  • .tabs__list-wrapper - Tab list wrapper
  • .tabs__list - Tab list container
  • .tabs__tab - Individual tab button
  • .tabs__panel - Tab panel content
  • .tabs__indicator - Tab indicator

Orientation Attributes

  • .tabs[data-orientation="horizontal"] - Horizontal tab layout (default)
  • .tabs[data-orientation="vertical"] - Vertical tab layout

Interactive States

The component supports both CSS pseudo-classes and data attributes:

  • Selected: [aria-selected="true"]
  • Hover: :hover or [data-hovered="true"]
  • Focus: :focus-visible or [data-focus-visible="true"]
  • Disabled: [aria-disabled="true"]

API Reference

Tabs.Root Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Tab layout orientation
selectedKeystring-Controlled selected tab key
defaultSelectedKeystring-Default selected tab key
onSelectionChange(key: Key) => void-Selection change handler
classNamestring-Additional CSS classes

Tabs.List Props

PropTypeDefaultDescription
aria-labelstring-Accessibility label for tab list
classNamestring-Additional CSS classes

Tabs.Tab Props

PropTypeDefaultDescription
idstring-Unique tab identifier
isDisabledbooleanfalseWhether tab is disabled
classNamestring-Additional CSS classes

Tabs.Panel Props

PropTypeDefaultDescription
idstring-Panel identifier matching tab id
classNamestring-Additional CSS classes

Switch

A toggle switch component for boolean states

TextField

Composition-friendly text fields with labels, descriptions, and inline validation