> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Code group

Display multiple code blocks with tabbed navigation.

Use the `CodeGroup` component to show multiple related code blocks in a single tabbed container. This is useful for showing the same command or snippet across different languages or tools.

## Basic usage

Wrap two or more fenced code blocks inside `<CodeGroup>`. Each tab is labeled from the `title` attribute on the code block:

```text
<CodeGroup>
&#96;&#96;&#96;bash title="npm"
npm install blodemd
&#96;&#96;&#96;

&#96;&#96;&#96;bash title="pnpm"
pnpm add blodemd
&#96;&#96;&#96;

&#96;&#96;&#96;bash title="yarn"
yarn add blodemd
&#96;&#96;&#96;

</CodeGroup>
```

```bash title="npm"
npm install blodemd
```

```bash title="pnpm"
pnpm add blodemd
```

```bash title="yarn"
yarn add blodemd
```

## Multi-language example

Show the same API call in different programming languages:

```text
<CodeGroup>
&#96;&#96;&#96;javascript title="Node.js"
const res = await fetch("https://api.blode.md/v1/projects", {
  headers: { Authorization: `Bearer ${API_KEY}` },
});
const data = await res.json();
&#96;&#96;&#96;

&#96;&#96;&#96;python title="Python"
import requests

res = requests.get(
    "https://api.blode.md/v1/projects",
    headers={"Authorization": f"Bearer {API_KEY}"},
)
data = res.json()
&#96;&#96;&#96;

&#96;&#96;&#96;bash title="cURL"
curl -H "Authorization: Bearer $API_KEY" \
  https://api.blode.md/v1/projects
&#96;&#96;&#96;

</CodeGroup>
```

```javascript title="Node.js"
const res = await fetch("https://api.blode.md/v1/projects", {
  headers: { Authorization: `Bearer ${API_KEY}` },
});
const data = await res.json();
```

```python title="Python"
import requests

res = requests.get(
    "https://api.blode.md/v1/projects",
    headers={"Authorization": f"Bearer {API_KEY}"},
)
data = res.json()
```

```bash title="cURL"
curl -H "Authorization: Bearer $API_KEY" \
  https://api.blode.md/v1/projects
```

## Tab labels

Tabs are labeled in this order of priority:

1. The `title` attribute on the code fence, such as &#96;&#96;&#96;bash title="npm"
2. The language identifier (e.g., `javascript`, `python`)
3. A generic fallback like "Tab 1"

> [!TIP]
> Always set explicit `title` attributes when the language alone does not
>   distinguish the tabs.