CodeGroup

Tabbed code blocks — one tab per snippet. Selection syncs across the page; useful for showing the same operation across languages or runtimes.

View as Markdown

Installation

npx nimbus-docs add code-group

yarn dlx nimbus-docs add code-group

pnpm dlx nimbus-docs add code-group

bunx nimbus-docs add code-group

Preview

<CodeGroup titles={["TypeScript", "JavaScript"]}>
```ts
function load(id: string) {
  return fetch(`/api/${id}`);
}
```

```js
function load(id) {
  return fetch(`/api/${id}`);
}
```
</CodeGroup>

Examples

Auto tab labels

Omit titles and tabs fall back to the language identifier of each block.

<CodeGroup>
```bash
npm install astro
```

```sh
pnpm add astro
```
</CodeGroup>

Mixed languages

Useful for showing the same operation across runtimes — request examples are the canonical case.

curl -X POST https://api.example.com/charge \
  -H "Authorization: Bearer $KEY"

await fetch("https://api.example.com/charge", {
  method: "POST",
  headers: { Authorization: `Bearer ${KEY}` },
});

import requests
requests.post(
    "https://api.example.com/charge",
    headers={"Authorization": f"Bearer {KEY}"},
)

<CodeGroup titles={["cURL", "Node", "Python"]}>
```bash
curl -X POST https://api.example.com/charge \
  -H "Authorization: Bearer $KEY"
```

```js
await fetch("https://api.example.com/charge", {
  method: "POST",
  headers: { Authorization: `Bearer ${KEY}` },
});
```

```py
import requests
requests.post(
    "https://api.example.com/charge",
    headers={"Authorization": f"Bearer {KEY}"},
)
```
</CodeGroup>

With filename frames

Each tab can carry its own filename via the title="…" meta.

<CodeGroup titles={["Server", "Client"]}>
```ts title="src/server.ts"
export const POST = async ({ request }) => {
  return new Response("ok");
};
```

```tsx title="src/client.tsx"
await fetch("/api", { method: "POST" });
```
</CodeGroup>

API reference

Every prop the component accepts, sourced from a single declaration.

Prop	Type
`titles`	`string[]`