Usage

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

Overview

Analytics

Reports

View your project overview and recent activity.

Anatomy

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

Examples

Account Settings

Manage your account information and preferences.

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.

Overview

Analytics

Reports

Performance

Engagement

Audience

Acquisition

Retention

Settings

Overview panel content.

Disabled Tab

Active

Disabled

Available

This tab is active and can be selected.

With Separator

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

Overview

Analytics

Reports

View your project overview and recent activity.

Secondary Variant

Overview

Analytics

Reports

View your project overview and recent activity.

Secondary Variant Vertical

Account

Security

Notifications

Billing

Account Settings

Manage your account information and preferences.

Render Function

Getting Started

Components Releases

Customization

Tailwind CSS

Monthly

Yearly

Billed monthly, cancel anytime.

Global CSS

To customize the Tabs component classes, you can use the @layer components directive. Learn more.

@layer components {
  .tabs__list {
    @apply rounded-xl border border-border bg-surface p-1;
  }

  .tabs__tab {
    @apply rounded-lg font-medium;
  }

  .tabs__indicator {
    @apply rounded-lg bg-foreground shadow-sm;
  }

  .tabs--secondary > .tabs__list-container > .tabs__list {
    @apply border-b border-border bg-transparent p-0;
  }

  .tabs--secondary > .tabs__list-container .tabs__indicator {
    @apply rounded-none bg-accent;
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Tabs component uses these CSS classes (View source styles):

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

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary"`	`"primary"`	Visual style variant. Primary uses a filled indicator, secondary uses an underline indicator
`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
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabsRenderProps>`	-	Overrides the default DOM element with a custom render function.

Tabs.List

Prop	Type	Default	Description
`aria-label`	`string`	-	Accessibility label for tab list
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabListRenderProps>`	-	Overrides the default DOM element with a custom render function.

Tabs.Tab

Prop	Type	Default	Description
`id`	`string`	-	Unique tab identifier
`isDisabled`	`boolean`	`false`	Whether tab is disabled
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabRenderProps>`	-	Overrides the default DOM element with a custom render function.

Tabs.Separator

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Tabs.Panel

Prop	Type	Default	Description
`id`	`string`	-	Panel identifier matching tab id
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabPanelRenderProps>`	-	Overrides the default DOM element with a custom render function.