---
title: Tabs
description: Tabs organize content into multiple sections and allow users to navigate between them.
icon: new
links:
  rac: Tabs
  source: tabs/tabs.tsx
  styles: tabs.css
  storybook: Components/Navigation/Tabs
  figma: true
---

## Usage

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

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

## Anatomy

```tsx
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

### 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"
/>

### Secondary Variant

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

### Secondary Variant Vertical

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

### Render Function

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

## Customization

### Tailwind CSS

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

### Global CSS

To customize the Tabs component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

```css
@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](https://getbem.com/) 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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/tabs.css)):

#### Base Classes [!toc]
- `.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 [!toc]
- `.tabs[data-orientation="horizontal"]` - Horizontal tab layout (default)
- `.tabs[data-orientation="vertical"]` - Vertical tab layout

#### Variant Classes [!toc]
- `.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.|

## Related Showcases

<RelatedShowcases component="Tabs" />

## Related Components

<RelatedComponents component="tabs" />
