Tabs

Import

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

Usage

<ComponentPreview isBgSolid name="tabs-basic" />

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.Separator />
          <Tabs.Indicator />
        </Tabs.Tab>
      </Tabs.List>
    </Tabs.ListContainer>
    <Tabs.Panel/>
  </Tabs>
)

Vertical

<ComponentPreview isBgSolid name="tabs-vertical" />

Overflow

When the tab list exceeds the available space, Tabs.ListContainer automatically renders scroll chevrons and fading edges so users can navigate the hidden tabs. This works the same way for both horizontal and vertical orientations.

<ComponentPreview isBgSolid name="tabs-overflow" />

Disabled Tab

<ComponentPreview isBgSolid name="tabs-disabled" />

With Separator

Add <Tabs.Separator /> inside each <Tabs.Tab> (except the first) to display separator lines between tabs.

<ComponentPreview isBgSolid name="tabs-with-separator" />

Custom Styles

<ComponentPreview isBgSolid name="tabs-custom-styles" />

Secondary Variant

<ComponentPreview isBgSolid name="tabs-secondary" />

Secondary Variant Vertical

<ComponentPreview isBgSolid name="tabs-secondary-vertical" />

Custom Render Function

<ComponentPreview name="tabs-custom-render-function" />

Styling

Passing Tailwind CSS classes

<CollapsibleCode lang="tsx" code={` 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-container__scroller - Scrollable wrapper around the tab list (handles overflow and fading edges)
• .tabs__list-container__scroll-prev - Scroll chevron button for the previous (left / up) direction
• .tabs__list-container__scroll-next - Scroll chevron button for the next (right / down) direction
• .tabs__list - Tab list container
• .tabs__tab - Individual tab button
• .tabs__separator - Separator between tabs
• .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

Variant Classes

• .tabs--secondary - Secondary variant with underline indicator

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

Tabs.List Props

Tabs.Tab Props

Tabs.Separator Props

Tabs.Panel Props