---
title: CodeGroup
description: Display code blocks in a tabbed interface. Show the same operation in multiple languages like cURL, Python, and JavaScript.
---

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

CodeGroup displays code blocks in a tabbed interface, showing the same operation in multiple languages. It's designed specifically for code—unlike Tabs (which work with any content), CodeGroup automatically extracts language labels and preserves syntax highlighting across all tabs.

Use CodeGroup when:
- **Showing API calls** in multiple languages (cURL, Python, JavaScript)
- **Comparing implementations** across frameworks
- **Displaying multiple files** in a code walkthrough

## Basic Usage

<CodeGroup>
```javascript JavaScript
const data = await fetch('/api/data').then(r => r.json());
```

```python Python
import requests
data = requests.get('/api/data').json()
```

```ruby Ruby
data = HTTParty.get('/api/data').parsed_response
```
</CodeGroup>

````mdx
<CodeGroup>
```javascript JavaScript
const data = await fetch('/api/data').then(r => r.json());
```

```python Python
import requests
data = requests.get('/api/data').json()
```

```ruby Ruby
data = HTTParty.get('/api/data').parsed_response
```
</CodeGroup>
````

## API Examples

Show API calls in different formats:

<CodeGroup>
```bash cURL
curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name": "John"}'
```

```javascript Node.js
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${TOKEN}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John' })
});
```

```python Python
import requests

response = requests.post(
    'https://api.example.com/users',
    headers={'Authorization': f'Bearer {TOKEN}'},
    json={'name': 'John'}
)
```
</CodeGroup>

## With File Names

Add file names to code blocks:

<CodeGroup>
```typescript src/client.ts
export const client = axios.create({
  baseURL: process.env.API_URL
});
```

```python client.py
import httpx

client = httpx.Client(base_url=os.environ['API_URL'])
```
</CodeGroup>

## CodeGroup vs Tabs

| Feature | CodeGroup | Tabs |
|---------|-----------|------|
| Designed for | Code blocks only | Any content |
| Labels | Auto-extracted from language | Manual title attribute |
| Synchronization | No | Yes (across page) |
| Syntax highlighting | Preserved per-language | Standard |

**Rule of thumb:** Use CodeGroup for multi-language code examples. Use Tabs when you need synchronization across the page or non-code content.

## Tips

- Put the most common language first (selected by default)
- Tab labels come from text after the language identifier (e.g., `javascript Node.js`)
- The selected tab persists across page navigation

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