Tabs

Import

import { Tabs, TabList, Tab, TabPanel } from '@heroui/react';

Usage

Overview

Analytics

Reports

View your project overview and recent activity.

"use client";

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

export function Basic() {
  return (
    <Tabs 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>
    </Tabs>
  );
}

Anatomy

Import all parts and piece them together.

import { Tabs, TabList, Tab, TabPanel } from '@heroui/react';

export default () => (
  <Tabs>
    <TabList>
      <Tab id="tab1">Tab 1</Tab>
      <Tab id="tab2">Tab 2</Tab>
    </TabList>
    <TabPanel id="tab1">Panel 1</TabPanel>
    <TabPanel id="tab2">Panel 2</TabPanel>
  </Tabs>
)

Vertical

Account

Security

Notifications

Billing

Account Settings

Manage your account information and preferences.

"use client";

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

export function Vertical() {
  return (
    <Tabs 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>
    </Tabs>
  );
}

Disabled Tab

Active

Disabled

Available

This tab is active and can be selected.

"use client";

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

export function Disabled() {
  return (
    <Tabs className="w-full max-w-md">
      <TabListWrapper>
        <TabList aria-label="Tabs 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>
    </Tabs>
  );
}

Custom Styles

Daily

Weekly

Bi-Weekly

Monthly

"use client";

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

export function CustomStyles() {
  return (
    <Tabs 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>
    </Tabs>
  );
}

Related Showcases

new

Apple iPhone 17 Pro Camera Zoom

Styling

Passing Tailwind CSS classes

import { Tabs, TabList, Tab, TabPanel } from '@heroui/react';

function CustomTabs() {
return (
  <Tabs className="w-full max-w-lg text-center">
    <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</Tab>
      <Tab id="weekly">Weekly</Tab>
      <Tab id="bi-weekly">Bi-Weekly</Tab>
      <Tab id="monthly">Monthly</Tab>
    </TabList>
    <TabPanel 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>
    </TabPanel>
    <TabPanel 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>
    </TabPanel>
    <TabPanel 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>
    </TabPanel>
    <TabPanel 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>
    </TabPanel>
  </Tabs>
);
}

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

TabList Props

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

Tab Props

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

TabPanel 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