---
title: Tabs
description: Switch between platform-specific or language-specific content variants.
url: https://pr-7-a9c4e9fe1b6c.thally.app/components/tabs
---

# Tabs

Switch between platform-specific or language-specific content variants.

`<Tabs>` and `<Tab>` create a tabbed content panel. Use them for platform-specific instructions, language variants, or any content where users need to pick one path.

## Example

#### npm

    ```bash
    npm install @company/sdk
    ```

#### pnpm

    ```bash
    pnpm add @company/sdk
    ```

#### yarn

    ```bash
    yarn add @company/sdk
    ```

````mdx
<Tabs>
  <Tab title="npm">
    ```bash
    npm install @company/sdk
    ```
  </Tab>
  <Tab title="pnpm">
    ```bash
    pnpm add @company/sdk
    ```
  </Tab>
</Tabs>
````

## Rich tab content

Tabs can contain any MDX content including callouts, code groups, and images:

````mdx
<Tabs>
  <Tab title="macOS">
    <Steps>
      <Step title="Install Homebrew">
        ```bash
        /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
        ```
      </Step>
    </Steps>
  </Tab>
  <Tab title="Windows">
    Download the installer from the releases page.
  </Tab>
</Tabs>
````

## Props

### `<Tab>`

| Prop | Type | Description |
|---|---|---|
| `title` | `string` | Label shown on the tab button |