# Tabs · HeroUI

> Tabs organize content into multiple sections and allow users to navigate between them.

- Page: https://jiguang132.com/systems/heroui/docs/components/tabs
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Import

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

### Usage


> Example `tabs-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tabs


### Anatomy

Import the Tabs component and access all parts using dot notation.

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

### Vertical


> Example `tabs-vertical`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tabs


### 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.


> Example `tabs-overflow`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tabs


### Disabled Tab


> Example `tabs-disabled`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tabs


### With Separator

Add `` inside each `` (except the first) to display separator lines between tabs.


> Example `tabs-with-separator`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tabs


### Custom Styles


> Example `tabs-custom-styles`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tabs


### Secondary Variant


> Example `tabs-secondary`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tabs


### Secondary Variant Vertical


> Example `tabs-secondary-vertical`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tabs


### Custom Render Function


> Example `tabs-custom-render-function`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tabs


## 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.|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt