---
title: CodeGroup
description: Muestra bloques de código en una interfaz con pestañas. Muestra la misma operación en múltiples lenguajes como cURL, Python y JavaScript.
---

CodeGroup muestra bloques de código en una interfaz con pestañas, mostrando la misma operación en múltiples lenguajes. Está diseñado específicamente para código—a diferencia de Tabs (que funciona con cualquier contenido), CodeGroup extrae automáticamente las etiquetas de lenguaje y preserva el resaltado de sintaxis en todas las pestañas.

Usa CodeGroup cuando:
- **Muestres llamadas API** en múltiples lenguajes (cURL, Python, JavaScript)
- **Compares implementaciones** entre frameworks
- **Muestres múltiples archivos** en un recorrido de código

## Uso básico

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

## Ejemplos de API

Muestra llamadas API en diferentes formatos:

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

## Con nombres de archivo

Añade nombres de archivo a los bloques de código:

<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

| Característica | CodeGroup | Tabs |
|----------------|-----------|------|
| Diseñado para | Solo bloques de código | Cualquier contenido |
| Etiquetas | Extraídas automáticamente del lenguaje | Atributo de título manual |
| Sincronización | No | Sí (en toda la página) |
| Resaltado de sintaxis | Preservado por lenguaje | Estándar |

**Regla general:** Usa CodeGroup para ejemplos de código en múltiples lenguajes. Usa Tabs cuando necesites sincronización en toda la página o contenido que no sea código.

## Consejos

- Pon el lenguaje más común primero (seleccionado por defecto)
- Las etiquetas de las pestañas provienen del texto después del identificador de lenguaje (p. ej., `javascript Node.js`)
- La pestaña seleccionada persiste durante la navegación de la página

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Resumen de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>