CodeGroup

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

const data = await fetch('/api/data').then(r => r.json());

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

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

With File Names

Add file names to code blocks:

export const client = axios.create({
  baseURL: process.env.API_URL
});

import httpx

client = httpx.Client(base_url=os.environ['API_URL'])

CodeGroup vs Tabs

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?