---
title: Tabs
description: Switchable panels for mutually exclusive content like package managers or languages. Matching tab titles sync across the entire page.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Whenever your page offers parallel alternatives -- package managers, programming languages, OS-specific instructions -- Tabs let readers pick once and stay in context. Matching tab titles sync automatically across the entire page, so selecting "yarn" in one group flips every other npm/yarn/pnpm group to match.

Use Tabs when:
- **Multiple implementations** of the same concept exist (npm/yarn/pnpm, JavaScript/Python)
- **Parallel options** are mutually exclusive (users pick one, not both)
- **Consistency matters** - the reader's choice should persist throughout the page

## Usage

```mdx
<Tabs>
  <Tab title="npm">npm install jamdesk</Tab>
  <Tab title="pnpm">pnpm add jamdesk</Tab>
</Tabs>
```

## Basic Tabs

<Tabs>
  <Tab title="First Tab">
    Content for the first tab.
  </Tab>
  <Tab title="Second Tab">
    Content for the second tab.
  </Tab>
  <Tab title="Third Tab">
    Content for the third tab.
  </Tab>
</Tabs>

```mdx
<Tabs>
  <Tab title="First Tab">
    Content for the first tab.
  </Tab>
  <Tab title="Second Tab">
    Content for the second tab.
  </Tab>
  <Tab title="Third Tab">
    Content for the third tab.
  </Tab>
</Tabs>
```

## Tabs vs CodeGroup vs Accordion

| Component | Best For | Synchronizes |
|-----------|----------|--------------|
| **Tabs** | Mutually exclusive content choices | Yes (across page) |
| **CodeGroup** | Code blocks in multiple languages | No |
| **Accordion** | Collapsible sections, FAQs | No |

**Rule of thumb:** Use Tabs when the reader's choice (like preferred package manager) should persist throughout the page. Use CodeGroup for code-only comparisons. Use Accordion for content that can all be relevant.

## Tabs with Icons

Add icons to tab titles using Font Awesome icons:

<Tabs>
  <Tab title="React" icon="react" iconType="brands">
    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```
  </Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">
    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```
  </Tab>
</Tabs>

````mdx
<Tabs>
  <Tab title="React" icon="react" iconType="brands">
    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```
  </Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">
    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```
  </Tab>
</Tabs>
````

## Border Bottom

Use the `borderBottom` prop to add a visual separator below the tab content:

<Tabs borderBottom>
  <Tab title="Overview">
    This tab group has a bottom border for visual separation.
  </Tab>
  <Tab title="Details">
    Useful when tabs contain varying content lengths.
  </Tab>
</Tabs>

```mdx
<Tabs borderBottom>
  <Tab title="Overview">
    This tab group has a bottom border for visual separation.
  </Tab>
  <Tab title="Details">
    Useful when tabs contain varying content lengths.
  </Tab>
</Tabs>
```

## Synchronized Tabs

Tabs with matching titles sync across the page automatically. Click "yarn" in one group and all npm/yarn/pnpm tabs on the page switch together:

**Install:**

<Tabs>
  <Tab title="npm">
    ```bash
    npm install my-package
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add my-package
    ```
  </Tab>
</Tabs>

**Run:**

<Tabs>
  <Tab title="npm">
    ```bash
    npm run dev
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn dev
    ```
  </Tab>
</Tabs>

Synchronization happens when tab titles match (case-insensitive).

## Props

### Tabs

<ParamField name="borderBottom" type="boolean" default="false">
  Adds a bottom border and padding to the tab content container. Useful to visually separate tabbed content from the rest of the page.
</ParamField>

### Tab

<ParamField name="title" type="string" required>
  The label displayed in the tab bar. Tabs with matching titles automatically synchronize their selection across the page.
</ParamField>

<ParamField name="icon" type="string">
  Font Awesome icon name to display before the title (e.g., "react", "code", "terminal").
</ParamField>

<ParamField name="iconType" type="string" default="solid">
  Font Awesome icon style. Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>