TabsNew

Import

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

Usage

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 /> {/* Optional */}
          <Tabs.Indicator />
        </Tabs.Tab>
      </Tabs.List>
    </Tabs.ListContainer>
    <Tabs.Panel/>
  </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.

Disabled Tab

With Separator

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

Custom Styles

Secondary Variant

Secondary Variant Vertical

Custom Render Function

Styling

Passing Tailwind CSS classes

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

function CustomTabs() {
return (
  <Tabs className="w-full max-w-lg text-center">

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