---
title: CodeGroup
description: Visualizza blocchi di codice in un'interfaccia a schede e mostra la stessa operazione in più linguaggi, come 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 visualizza blocchi di codice in un'interfaccia a schede, mostrando la stessa operazione in più linguaggi. È progettato specificamente per il codice. A differenza di Tabs, che funziona con qualsiasi contenuto, CodeGroup estrae automaticamente le etichette dei linguaggi e preserva l'evidenziazione della sintassi in tutte le schede.

Usa CodeGroup per:
- **Mostrare chiamate API** in più linguaggi (cURL, Python, JavaScript)
- **Confrontare implementazioni** tra diversi framework
- **Visualizzare più file** in una procedura guidata sul codice

## Utilizzo di base

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

## Esempi di API

Mostra le chiamate API in formati diversi:

<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 nomi di file

Aggiungi i nomi dei file ai blocchi di codice:

<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 e Tabs a confronto

| Funzionalità | CodeGroup | Tabs |
|---------|-----------|------|
| Progettato per | Solo blocchi di codice | Qualsiasi contenuto |
| Etichette | Estratte automaticamente dal linguaggio | Attributo title manuale |
| Sincronizzazione | No | Sì (in tutta la pagina) |
| Evidenziazione della sintassi | Preservata per ogni linguaggio | Standard |

**Regola generale:** usa CodeGroup per esempi di codice in più linguaggi. Usa Tabs quando ti serve la sincronizzazione in tutta la pagina o per contenuti non costituiti da codice.

## Suggerimenti

- Inserisci per primo il linguaggio più comune (selezionato per impostazione predefinita)
- Le etichette delle schede provengono dal testo dopo l'identificatore del linguaggio (ad esempio, `javascript Node.js`)
- La scheda selezionata rimane attiva durante la navigazione nella pagina

## Qual è il prossimo passo?

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Esplora tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>