---
title: CodeGroup
description: Exiba blocos de código em uma interface com abas. Mostre a mesma operação em várias linguagens, como cURL, Python e 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 exibe blocos de código em uma interface com abas, mostrando a mesma operação em várias linguagens. Ele foi desenvolvido especificamente para código. Diferentemente de Tabs (que funciona com qualquer conteúdo), CodeGroup extrai automaticamente os rótulos das linguagens e preserva o realce de sintaxe em todas as abas.

Use CodeGroup para:
- **Mostrar chamadas de API** em várias linguagens (cURL, Python, JavaScript)
- **Comparar implementações** entre frameworks
- **Exibir vários arquivos** em um passo a passo 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>
````

## Exemplos de API

Mostre chamadas de API em 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>

## Com nomes de arquivo

Adicione nomes de arquivo aos blocos 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 x Tabs

| Recurso | CodeGroup | Tabs |
|---------|-----------|------|
| Projetado para | Apenas blocos de código | Qualquer conteúdo |
| Rótulos | Extraídos automaticamente da linguagem | Atributo title manual |
| Sincronização | Não | Sim (em toda a página) |
| Realce de sintaxe | Preservado por linguagem | Padrão |

**Regra geral:** use CodeGroup para exemplos de código em várias linguagens. Use Tabs quando precisar de sincronização em toda a página ou de conteúdo que não seja código.

## Dicas

- Coloque primeiro a linguagem mais comum (selecionada por padrão)
- Os rótulos das abas vêm do texto após o identificador da linguagem (por exemplo, `javascript Node.js`)
- A aba selecionada permanece entre as navegações da página

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Visão geral dos componentes" icon="puzzle-piece" href="/pt/components/overview">
    Explore todos os componentes disponíveis
  </Card>
  <Card title="Noções básicas de MDX" icon="file-code" href="/pt/content/mdx-basics">
    Aprenda a usar componentes em MDX
  </Card>
</Columns>