> ## Documentation Index
> [HTML page](https://blode.md/docs/components/tabs)
> [Documentation index](https://blode.md/docs/llms.txt)
> Use the index to discover all available pages before exploring further.

# Tabs

Organize alternate content into Tabs and Tab panels so readers can switch between related options without leaving the documentation page.

Use the `Tabs` and `Tab` components to let readers switch between related content without leaving the page.

## Basic tabs

Each `Tab` needs a `title` prop to label its tab button:

```text
<Tabs>
  <Tab title="npm">`npm install edda-docs`</Tab>
  <Tab title="pnpm">`pnpm add edda-docs`</Tab>
  <Tab title="yarn">`yarn add edda-docs`</Tab>
</Tabs>
```

  ### npm

`npm install edda-docs`
  ### pnpm

`pnpm add edda-docs`
  ### yarn

`yarn add edda-docs`

## Content tabs

Tabs work with any content, not just code:

```mdx
<Tabs>
  <Tab title="Overview">
    Edda turns your Markdown files into a production-ready documentation site.
  </Tab>
  <Tab title="Features">
    - Full-text search - Custom domains - OpenAPI integration - Built-in
    components
  </Tab>
</Tabs>
```

  ### Overview

Edda turns your Markdown files into a production-ready documentation site.
  ### Features

- Full-text search - Custom domains - OpenAPI integration - Built-in
components

## Default tab

Use `defaultTabIndex` on `Tabs` to set which tab is active on load (zero-indexed):

```mdx
<Tabs defaultTabIndex={1}>
  <Tab title="First">This tab is not selected by default.</Tab>
  <Tab title="Second">This tab is selected by default.</Tab>
</Tabs>
```

  ### First

This tab is not selected by default.
  ### Second

This tab is selected by default.

## Props

### Tabs

- `defaultTabIndex` (type: number, required: false, default: 0): Index of the tab to show on initial render.
- `children` (type: ReactNode, required: true): One or more Tab components.

### Tab

- `title` (type: string, required: false): Label displayed on the tab button. You can also use `label` as an alias.
- `icon` (type: ReactNode, required: false): Icon displayed before the tab label.
- `children` (type: ReactNode, required: true): Content shown when the tab is active.