---
title: Tabs
description: Tabbed content for showing multiple options or variants.
icon: columns
---

# Tabs

Tabs organize content into switchable panels, perfect for showing multiple options, code variants, or platform-specific instructions.

## Basic Tabs

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

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

## With Rich Content

Tabs can contain any content, not just code:

```mdx
<Tabs>
  <Tab title="macOS">
    ## Installation on macOS
    
    Download the installer from our website or use Homebrew:
    
    ```bash
    brew install myapp
    ```
  </Tab>
  <Tab title="Windows">
    ## Installation on Windows
    
    Download the `.exe` installer from our website or use winget:
    
    ```powershell
    winget install myapp
    ```
  </Tab>
  <Tab title="Linux">
    ## Installation on Linux
    
    Use your distribution's package manager:
    
    ```bash
    # Debian/Ubuntu
    apt install myapp
    
    # Fedora
    dnf install myapp
    ```
  </Tab>
</Tabs>
```

<Tabs>
  <Tab title="macOS">
    ## Installation on macOS
    
    Download the installer or use Homebrew:
    
    ```bash
    brew install myapp
    ```
  </Tab>
  <Tab title="Windows">
    ## Installation on Windows
    
    Download the installer or use winget:
    
    ```powershell
    winget install myapp
    ```
  </Tab>
  <Tab title="Linux">
    ## Installation on Linux
    
    Use your package manager:
    
    ```bash
    # Debian/Ubuntu
    apt install myapp
    ```
  </Tab>
</Tabs>

## With Icons

Add icons to tab titles:

```mdx
<Tabs>
  <Tab title="TypeScript" icon="typescript">
    TypeScript content...
  </Tab>
  <Tab title="Python" icon="python">
    Python content...
  </Tab>
</Tabs>
```

## Synced Tabs

Tabs with the same group ID stay in sync across the page:

```mdx
<Tabs group="language">
  <Tab title="Node.js">Node content 1</Tab>
  <Tab title="Python">Python content 1</Tab>
</Tabs>

<!-- Later on the page... -->

<Tabs group="language">
  <Tab title="Node.js">Node content 2</Tab>
  <Tab title="Python">Python content 2</Tab>
</Tabs>
```

When you select a tab in one group, all matching groups update.

## Tab Props

| Prop | Type | Description |
|------|------|-------------|
| `title` | string | Tab label (required) |
| `icon` | string | Optional icon |
| `children` | ReactNode | Tab content |

## Tabs Props

| Prop | Type | Description |
|------|------|-------------|
| `group` | string | Sync ID for linked tabs |
| `children` | Tab[] | Tab components |

## CodeGroup vs Tabs

**Use `<CodeGroup>`** for code-only content with language preference persistence:

<CodeGroup>

```typescript title="TypeScript"
const result = await fetch(url);
```

```python title="Python"
result = requests.get(url)
```

</CodeGroup>

**Use `<Tabs>`** for mixed content or non-code options:

<Tabs>
  <Tab title="Cloud">
    Sign up at [syntext.dev](https://syntext.dev) and follow the onboarding flow.
  </Tab>
  <Tab title="Self-Hosted">
    Deploy using Docker:
    ```bash
    docker run -p 3000:3000 syntext/server
    ```
  </Tab>
</Tabs>

## Best Practices

<Tip>
Keep tab titles short (1-2 words). Use icons to add context without lengthening titles.
</Tip>

- Use consistent tab order across the site
- Ensure all tabs have roughly equal content
- Don't nest tabs inside tabs
- Use `group` prop for related tab sets that should sync