# Tabs and Tab

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

The same place in a page, with a tab per option - per operating system, package manager or plan.

`Tabs` shows one of several versions of the same content, with a tab to pick each. Each `Tab` holds any content: text, lists, code blocks, other components. A border goes around the tabs and the open tab's content, so it's clear where they end.

**npm**

```bash
npm install acme-sdk
```

**pnpm**

```bash
pnpm add acme-sdk
```

**yarn**

```bash
yarn add acme-sdk
```

````mdx
<Tabs>
  <Tab title="npm">
    ```bash
    npm install acme-sdk
    ```
  </Tab>
  <Tab title="pnpm">
    ```bash
    pnpm add acme-sdk
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add acme-sdk
    ```
  </Tab>
</Tabs>
````

## Icons

`icon` puts an icon before a tab's title:

**macOS**

Download the `.dmg`, open it, and drag **Acme** to **Applications**.

**Windows**

Run the `.msi` installer, and follow its steps.

**Linux**

```bash
curl -fsSL https://example.com/install.sh | sh
```

```mdx
<Tabs>
  <Tab title="macOS" icon="apple">
    Download the `.dmg`, open it, and drag **Acme** to **Applications**.
  </Tab>
  <Tab title="Windows" icon="windows">
    Run the `.msi` installer, and follow its steps.
  </Tab>
  <Tab title="Linux" icon="linux">
    ...
  </Tab>
</Tabs>
```

## Another tab first

`defaultTabIndex` picks the tab that's open when the page loads, counting from 0. Here the second one, **Business**, is:

**Free**

60 requests per minute, and community support.

**Business**

1,000 requests per minute, and email support within one business day.

**Enterprise**

Custom limits, single sign-on, and a dedicated contact.

```mdx
<Tabs defaultTabIndex={1}>
  <Tab title="Free">...</Tab>
  <Tab title="Business">...</Tab>
  <Tab title="Enterprise">...</Tab>
</Tabs>
```

## Rich content

A tab holds anything a page does:

**Steps**

**1. Create a key**

In the dashboard, open **API keys** and click **New key**.

**2. Store it**

Save it as `ACME_KEY` in your server's environment.

**Callout**

> Never put a secret key in a web page or a mobile app.

For code alone, a [CodeGroup](https://preview.writedocs.io/docs/content/components/code-group/) is simpler: each code block's title is its tab. For a whole page in several versions, use [View](https://preview.writedocs.io/docs/content/components/view/).

## Tab props

**`title`** `string` required

The tab's name.

**`icon`** `string`

An icon before the name - any [icon](https://preview.writedocs.io/docs/content/components/icon/#icons).

## Tabs props

**`defaultTabIndex`** `number` default: `0`

The tab that's open when the page loads, counting from 0.