Tabs

Import

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

Usage

Overview

Analytics

Reports

View your project overview and recent activity.

"use client";

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

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

Anatomy

Import all parts and piece them together.

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

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

Vertical

Account

Security

Notifications

Billing

Account Settings

Manage your account information and preferences.

"use client";

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

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

Disabled Tab

Active

Disabled

Available

This tab is active and can be selected.

"use client";

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

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

Custom Styles

Daily

Weekly

Bi-Weekly

Monthly

"use client";

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

export function CustomStyles() {
  return (
    <Tabs 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.Tab>
          <Tabs.Tab id="weekly">Weekly</Tabs.Tab>
          <Tabs.Tab id="bi-weekly">Bi-Weekly</Tabs.Tab>
          <Tabs.Tab id="monthly">Monthly</Tabs.Tab>
        </Tabs.List>
        <Tabs.Indicator className="bg-accent" />
      </Tabs.ListWrapper>
    </Tabs>
  );
}

Styling

Passing Tailwind CSS classes


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

function CustomTabs() {
return (
  <Tabs 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.Tab>
        <Tabs.Tab id="weekly">Weekly</Tabs.Tab>
        <Tabs.Tab id="bi-weekly">Bi-Weekly</Tabs.Tab>
        <Tabs.Tab id="monthly">Monthly</Tabs.Tab>
      </Tabs.List>
      <Tabs.Indicator className="bg-accent" />
    </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>
);
}

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-hover="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

On this page