Overview

The <CodeGroup> component displays multiple code blocks with tabbed navigation, perfect for showing the same functionality in different programming languages or package managers.

Basic Usage

<CodeGroup>
```javascript JavaScript
console.log("Hello, World!");
```

```python Python
print("Hello, World!")
```

```ruby Ruby
puts "Hello, World!"
```

</CodeGroup>

Syntax

CodeGroup automatically extracts code blocks and creates tabs based on the language labels:

<CodeGroup>```language Label code here ```</CodeGroup>

The label after the language becomes the tab title.

Package Manager Example

<CodeGroup>
```bash npm
npm install @acme/sdk
```

```bash yarn
yarn add @acme/sdk
```

```bash pnpm
pnpm add @acme/sdk
```

```bash bun
bun add @acme/sdk
```

</CodeGroup>

Multi-Language API Example

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

```javascript JavaScript
const response = await fetch("https://api.example.com/users", {
  method: "POST",
  headers: { Authorization: "Bearer TOKEN" },
  body: JSON.stringify({ name: "John" }),
});
```

```python Python
import requests

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

```php PHP
$response = Http::withToken('TOKEN')
    ->post('https://api.example.com/users', [
        'name' => 'John'
    ]);
```

</CodeGroup>

Features

• Automatic Tabs: Creates tabs from code block labels
• Syntax Highlighting: Powered by Shiki with 200+ languages
• Copy Button: One-click code copying
• Responsive: Adapts to screen size
• Theme Aware: Synchronized light/dark code themes

Next, learn about the CodeBlock Component for single code snippets.