---
title: Tabs
description: Use Tabs and Tab to organize related content into switchable panels.
---

Use tabs when readers need to switch between related views in the same space.

<ComponentPreview>
  ```mdx
  <Tabs>
    <Tab label="Spring">
      Mild temperatures and longer daylight hours.
    </Tab>
    <Tab label="Summer">
      Warmer days, stronger sun, and later sunsets.
    </Tab>
    <Tab label="Autumn">
      Cooler evenings and changing leaf colors.
    </Tab>
  </Tabs>
  ```
</ComponentPreview>

## Structure

### Use `Tabs` and `Tab` together

Wrap each `Tab` inside `Tabs`.

<ComponentPreview showAllCode>
  ```mdx
  <Tabs>
    <Tab label="Morning">
      Best for focused planning and priority setting.
    </Tab>
    <Tab label="Afternoon">
      Good for meetings and collaborative tasks.
    </Tab>
    <Tab label="Evening">
      Useful for review, cleanup, and next-day prep.
    </Tab>
  </Tabs>
  ```
</ComponentPreview>

### Add clear tab labels

`label` is required on every `Tab`.
Keep labels short so readers can scan options quickly.

<Callout type="tip" title="Name tabs by intent">
Choose labels that describe the reader's goal, such as `Overview`,
`Examples`, or `Troubleshooting`.
</Callout>

## Add icons

Use `icon` on `Tab` to display an icon next to the tab label.

<ComponentPreview showAllCode>
  ```mdx
  <Tabs>
    <Tab label="Overview" icon="lucide:layout-grid">
      A quick summary of what is included.
    </Tab>
    <Tab label="Checklist" icon="lucide:list-checks">
      Steps to complete before you begin.
    </Tab>
    <Tab label="Notes" icon="lucide:notebook-pen">
      Extra context and reminders.
    </Tab>
  </Tabs>
  ```
</ComponentPreview>

## Rich tab content

Each tab can include multiple paragraphs, lists, and other components.

<ComponentPreview showAllCode>
  ```mdx
  <Tabs>
    <Tab label="Plan">
      Start with a clear objective.

      - Define the outcome.
      - List required materials.
      - Estimate the time needed.
    </Tab>
    <Tab label="Execute">
      Complete one section at a time.

      <Callout type="info" title="Work in batches">
        Group similar tasks together to reduce context switching.
      </Callout>
    </Tab>
  </Tabs>
  ```
</ComponentPreview>

## Props

### `Tab` props

| Prop | Description | Type | Default |
| --- | --- | --- | ---: |
| `label` | Text displayed in the tab button. | `string` |  |
| `icon` | Optional icon name displayed before the label. | `string` |  |

### `Tabs` props

`Tabs` is a layout container and currently does not accept props.