> ## Documentation Index
> [HTML page](https://blode.md/docs/components/code-group)
> [Documentation index](https://blode.md/docs/llms.txt)
> Use the index to discover all available pages before exploring further.
# Code group
Show related code samples in a CodeGroup with tabbed navigation so readers can switch languages, package managers, or tools in one place.
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.
Use `CodeGroup` whenever readers need the same instruction in more than one form: package managers, programming languages, or shell variants. It keeps the page shorter than stacking separate code blocks and lets readers pick their stack without scrolling past irrelevant commands. Tab labels come from each fence's `title` attribute, so name tabs explicitly when two blocks share a language.
On quickstart pages, a common pattern is a `CodeGroup` with npm, pnpm, and yarn install commands followed by `edda new`. For API reference pages, group Node.js, Python, and cURL examples so integrators can copy the sample that matches their backend.
## Basic usage
Wrap two or more fenced code blocks inside ``. Each tab is labeled from the `title` attribute on the code block:
```text
```bash title="npm"
npm install edda-docs
```
```bash title="pnpm"
pnpm add edda-docs
```
```bash title="yarn"
yarn add edda-docs
```
```
```bash title="npm"
npm install edda-docs
```
```bash title="pnpm"
pnpm add edda-docs
```
```bash title="yarn"
yarn add edda-docs
```
## Multi-language example
Show the same API call in different programming languages:
```text
```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
```
```
```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 ```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.
## Related pages
- [Code blocks](/content/code-blocks) -- syntax highlighting and titles for single snippets
- [Tabs](/components/tabs) -- tabbed prose or mixed content, not just code
- [Installer](/components/installer) -- copyable install command when only one package manager matters