Tabs

Components

Organize content into interactive tabbed sections

Overview

The <Tabs> component organizes content into switchable sections. Perfect for showing platform-specific instructions, code examples in different languages, or alternative approaches.

Basic Usage

JavaScript is a versatile programming language.

<Tabs>
<Tab title="JavaScript">
  JavaScript is a versatile programming language.
</Tab>

<Tab title="TypeScript">TypeScript adds static typing to JavaScript.</Tab>

<Tab title="Python">
  Python is known for its readability and simplicity.
</Tab>
</Tabs>

Package Manager Examples

Common use case for installation instructions:

npm install @acme/sdk

yarn add @acme/sdk

pnpm add @acme/sdk

bun add @acme/sdk

<Tabs>
<Tab title="npm">
  ```bash
  npm install @acme/sdk
  ```
</Tab>

<Tab title="yarn">```bash yarn add @acme/sdk ```</Tab>

<Tab title="pnpm">```bash pnpm add @acme/sdk ```</Tab>

<Tab title="bun">
  ```bash
  bun add @acme/sdk
  ```
</Tab>
</Tabs>

Platform-Specific Instructions

Show different instructions based on operating system:

Install using Homebrew:

brew install acme-cli

Or download the .dmg installer from our website.

Download the .exe installer from our website, or use Chocolatey:

choco install acme-cli

Install using your package manager:

Ubuntu/Debian:

sudo apt install acme-cli

Fedora:

sudo dnf install acme-cli

<Tabs>
<Tab title="macOS">
  Install using Homebrew:

  ```bash
  brew install acme-cli
  ```

  Or download the `.dmg` installer from our website.

</Tab>

<Tab title="Windows">
  Download the `.exe` installer from our website, or use Chocolatey:

  ```powershell
  choco install acme-cli
  ```

</Tab>

<Tab title="Linux">
  Install using your package manager:

  **Ubuntu/Debian:**
  ```bash
  sudo apt install acme-cli
  ```

  **Fedora:**
  ```bash
  sudo dnf install acme-cli
  ```

</Tab>
</Tabs>

Language-Specific Code Examples

Perfect for showing the same functionality in different languages:

curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name":"John Doe","email":"john@example.com"}'

const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@example.com'
  })
});

import requests

response = requests.post(
    'https://api.example.com/users',
    headers={
        'Authorization': 'Bearer YOUR_API_KEY',
        'Content-Type': 'application/json'
    },
    json={
        'name': 'John Doe',
        'email': 'john@example.com'
    }
)

<Tabs>
<Tab title="cURL">
  ```bash
  curl -X POST https://api.example.com/users \
    -H "Authorization: Bearer YOUR_API_KEY" \
    -H "Content-Type: application/json" \
    -d '{"name":"John Doe","email":"john@example.com"}'
  ```
</Tab>

<Tab title="JavaScript">
  ```javascript
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'John Doe',
      email: 'john@example.com'
    })
  });
  ```
</Tab>

<Tab title="Python">
  ```python
  import requests

  response = requests.post(
      'https://api.example.com/users',
      headers={
          'Authorization': 'Bearer YOUR_API_KEY',
          'Content-Type': 'application/json'
      },
      json={
          'name': 'John Doe',
          'email': 'john@example.com'
      }
  )
  ```

</Tab>
</Tabs>

Rich Content

Tabs support complex content including multiple components:

Quick Start

Get up and running in minutes:

Install

npm install @acme/sdk

Initialize

import { init } from '@acme/sdk';
init({ apiKey: 'YOUR_KEY' });

Custom Configuration

For production environments:

import { init } from '@acme/sdk';

init({
  apiKey: process.env.ACME_API_KEY,
  environment: 'production',
  timeout: 5000,
  retries: 3
});

Always use environment variables for API keys.

<Tabs>
<Tab title="Basic Setup">
  ## Quick Start

  Get up and running in minutes:

  <Steps>
    <Step title="Install">
      ```bash
      npm install @acme/sdk
      ```
    </Step>

    <Step title="Initialize">
      ```javascript
      import { init } from '@acme/sdk';
      init({ apiKey: 'YOUR_KEY' });
      ```
    </Step>
  </Steps>

</Tab>

<Tab title="Advanced Setup">
  ## Custom Configuration

  For production environments:

  ```javascript
  import { init } from '@acme/sdk';

  init({
    apiKey: process.env.ACME_API_KEY,
    environment: 'production',
    timeout: 5000,
    retries: 3
  });
  ```

  <Callout status="warning">
    Always use environment variables for API keys.
  </Callout>

</Tab>
</Tabs>

Default Tab

Control which tab is active by default:

TypeScript will be shown first (default).

<Tabs defaultValue="TypeScript">
<Tab title="JavaScript">
  JavaScript will not be shown first.
</Tab>

<Tab title="TypeScript">TypeScript will be shown first (default).</Tab>

<Tab title="Python">
  Python is available but not default.
</Tab>
</Tabs>

The defaultValue must match a tab's title exactly (case-sensitive).

Props

Tabs Props

children

ReactNoderequired

The <Tab> components to render. Only direct <Tab> children are processed.

<Tabs>
  <Tab title="First">...</Tab>
  <Tab title="Second">...</Tab>
</Tabs>

defaultValue

string

The title of the tab to show by default. If not specified, the first tab is active.

<Tabs defaultValue="TypeScript">
  <Tab title="JavaScript">...</Tab>
  <Tab title="TypeScript">...</Tab>
</Tabs>

colorPalette

string

Color palette for active tab indicators. Defaults to site's colorPalette.

<Tabs colorPalette="purple">...</Tabs>

Tab Props

title

stringrequired

The label displayed in the tab selector.

<Tab title="JavaScript">JavaScript content here</Tab>