> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs

Organize content into switchable tabbed panels.

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 blodemd`</Tab>
  <Tab title="pnpm">`pnpm add blodemd`</Tab>
  <Tab title="yarn">`yarn add blodemd`</Tab>
</Tabs>
```

  ### npm

`npm install blodemd`
  ### pnpm

`pnpm add blodemd`
  ### yarn

`yarn add blodemd`

## Content tabs

Tabs work with any content, not just code:

```mdx
<Tabs>
  <Tab title="Overview">
    Blode.md 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

Blode.md 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.