Tabs

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 inside each (except the first) to display separator lines between tabs.

Custom Styles

Secondary Variant

Secondary Variant Vertical

Custom Render Function

Styling

Passing Tailwind CSS classes

      Daily
      Weekly
      Bi-Weekly
      Monthly
    
  
  
    <h3 className="mb-2 font-semibold">Daily</h3>
    Manage your daily tasks and goals.
  
  
    <h3 className="mb-2 font-semibold">Weekly</h3>
    Manage your weekly tasks and goals.
  
  
    <h3 className="mb-2 font-semibold">Bi-Weekly</h3>
    Manage your bi-weekly tasks and goals.
  
  
    <h3 className="mb-2 font-semibold">Monthly</h3>
    Manage your monthly tasks and goals.
  

); } `} />

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

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 Props

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 Props

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 Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes

Tabs.Panel Props

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.