Tabs

Import

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

Usage

Overview

Analytics

Reports

View your project overview and recent activity.

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

export function Basic() {
  return (
    <TabsRoot className="w-full max-w-md">
      <TabListContainer>
        <TabList aria-label="Options">
          <Tab id="overview">
            Overview
            <TabIndicator />
          </Tab>
          <Tab id="analytics">
            Analytics
            <TabIndicator />
          </Tab>
          <Tab id="reports">
            Reports
            <TabIndicator />
          </Tab>
        </TabList>
      </TabListContainer>
      <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>
    <Tabs.ListContainer>
      <Tabs.List aria-label="Options">
        <Tabs.Tab>
          <Tabs.Indicator />
        </Tabs.Tab>
      </Tabs.List>
    </Tabs.ListContainer>
    <Tabs.Panel/>
  </Tabs>
)

Vertical

Account

Security

Notifications

Billing

Account Settings

Manage your account information and preferences.

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

export function Vertical() {
  return (
    <TabsRoot className="w-full max-w-lg" orientation="vertical">
      <TabListContainer>
        <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>
      </TabListContainer>
      <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

Active

Disabled

Available

This tab is active and can be selected.

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

export function Disabled() {
  return (
    <TabsRoot className="w-full max-w-md">
      <TabListContainer>
        <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>
      </TabListContainer>
      <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

Daily

Weekly

Bi-Weekly

Monthly

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

export function CustomStyles() {
  return (
    <TabsRoot className="w-full max-w-lg text-center">
      <TabListContainer>
        <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>
      </TabListContainer>
    </TabsRoot>
  );
}

Related Showcases

new

Apple iPhone 17 Pro Camera Zoom

Styling

Passing Tailwind CSS classes

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

function CustomTabs() {
return (
  <Tabs className="w-full max-w-lg text-center">
    <Tabs.ListContainer>
      <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.ListContainer>
    <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>
);
}

CSS Classes

The Tabs component uses these CSS classes:

Base Classes

.tabs - Base tabs container
.tabs__list-container - Tab list container 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 Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Tab layout orientation
`selectedKey`	`string`	-	Controlled selected tab key
`defaultSelectedKey`	`string`	-	Default selected tab key
`onSelectionChange`	`(key: Key) => void`	-	Selection change handler
`className`	`string`	-	Additional CSS classes

Tabs.List Props

Prop	Type	Default	Description
`aria-label`	`string`	-	Accessibility label for tab list
`className`	`string`	-	Additional CSS classes

Tabs.Tab Props

Prop	Type	Default	Description
`id`	`string`	-	Unique tab identifier
`isDisabled`	`boolean`	`false`	Whether tab is disabled
`className`	`string`	-	Additional CSS classes

Tabs.Panel Props

Prop	Type	Default	Description
`id`	`string`	-	Panel identifier matching tab id
`className`	`string`	-	Additional CSS classes

Account Settings

Related Showcases

On this page

Related Showcases