---
title: CodeGroup
description: CodeGroup zeigt Codeblöcke in einer Oberfläche mit Registerkarten an und stellt dieselbe Operation in mehreren Sprachen dar, etwa cURL, Python und 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 zeigt Codeblöcke in einer Oberfläche mit Registerkarten an und stellt dieselbe Operation in mehreren Sprachen dar. Die Komponente ist speziell für Code konzipiert. Anders als Tabs, die mit beliebigen Inhalten funktionieren, extrahiert CodeGroup automatisch die Sprachbezeichnungen und bewahrt die Syntaxhervorhebung in allen Registerkarten.

Verwende CodeGroup für:
- **API-Aufrufe in mehreren Sprachen anzeigen** (cURL, Python, JavaScript)
- **Implementierungen über verschiedene Frameworks hinweg vergleichen**
- **Mehrere Dateien** in einer Code-Walkthrough **anzeigen**

## Grundlegende Verwendung

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

Zeige API-Aufrufe in verschiedenen Formaten:

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

## Mit Dateinamen

Füge Codeblöcken Dateinamen hinzu:

<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 im Vergleich zu Tabs

| Funktion | CodeGroup | Tabs |
|---------|-----------|------|
| Konzipiert für | Nur Codeblöcke | Beliebige Inhalte |
| Bezeichnungen | Automatisch aus der Sprache extrahiert | Manuelles title-Attribut |
| Synchronisierung | Nein | Ja (über die gesamte Seite hinweg) |
| Syntaxhervorhebung | Pro Sprache bewahrt | Standard |

**Faustregel:** Verwende CodeGroup für mehrsprachige Codebeispiele. Verwende Tabs, wenn du eine Synchronisierung über die Seite hinweg oder Inhalte ohne Code benötigst.

## Tipps

- Platziere die am häufigsten verwendete Sprache an erster Stelle (standardmäßig ausgewählt).
- Die Bezeichnungen der Registerkarten stammen aus dem Text nach dem Sprachbezeichner (z. B. `javascript Node.js`).
- Die ausgewählte Registerkarte bleibt beim Navigieren zwischen Seiten erhalten.

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Übersicht der Komponenten" icon="puzzle-piece" href="/de/components/overview">
    Alle verfügbaren Komponenten durchsuchen
  </Card>
  <Card title="MDX-Grundlagen" icon="file-code" href="/de/content/mdx-basics">
    Erfahren, wie Komponenten in MDX verwendet werden
  </Card>
</Columns>