Code group

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:

Copy<CodeGroup>
```bash title="npm"
npm install blodemd
```

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

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

</CodeGroup>

Copynpm install blodemd

Copypnpm add blodemd

Copyyarn add blodemd

Multi-language example

Show the same API call in different programming languages:

Copy<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",

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

Tab labels

Tabs are labeled in this order of priority:

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