Tabs and Tab

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 install acme-sdk

pnpm add acme-sdk

yarn add acme-sdk

<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:

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

Run the .msi installer, and follow its steps.

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

<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:

60 requests per minute, and community support.

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

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

<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:

Create a key

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

Store it

Save it as ACME_KEY in your server’s environment.

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

For code alone, a CodeGroup is simpler: each code block’s title is its tab. For a whole page in several versions, use View.

Tab props

title string required

The tab’s name.

icon string

An icon before the name - any icon.

Tabs props

defaultTabIndex number default: 0

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