Code Group

Basic usage

Wrap two or more fenced code blocks in <CodeGroup>. The label after the language identifier becomes the tab title.

<CodeGroup>
```bash npm
npm install @codivdocs/sdk
```

```bash yarn
yarn add @codivdocs/sdk
```

```bash pnpm
pnpm add @codivdocs/sdk
```
</CodeGroup>

npm install @codivdocs/sdk

Tab labels

CodeGroup picks the tab label from the first thing it finds, in this order:

1. Metadata after the language: ```bash npm → label npm

2. Explicit title prop: ```bash {title="Install"} → label Install

3. Language identifier: ```typescript → label typescript

4. Fallback: Tab 1, Tab 2, etc.

The first format is the cleanest and matches Mintlify — prefer it whenever possible.

Multi-language API examples

The classic use case — the same request in cURL, JavaScript, Python, Go.

<CodeGroup>
```bash cURL
curl -X POST https://api.codivdocs.com/v1/projects \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"name": "My Docs"}'
```

```js JavaScript
const project = await fetch("https://api.codivdocs.com/v1/projects", {
  method: "POST",
  headers: { Authorization: `Bearer ${token}` },
  body: JSON.stringify({ name: "My Docs" }),
});
```

```python Python
import requests
r = requests.post(
    "https://api.codivdocs.com/v1/projects",
    headers={"Authorization": f"Bearer {token}"},
    json={"name": "My Docs"},
)
```

```go Go
req, _ := http.NewRequest("POST", "https://api.codivdocs.com/v1/projects",
  strings.NewReader(`{"name":"My Docs"}`))
req.Header.Set("Authorization", "Bearer " + token)
```
</CodeGroup>

curl -X POST https://api.codivdocs.com/v1/projects \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"name": "My Docs"}'

Syntax highlighting + copy button

Each tab inherits the platform's code block enhancements:

• Syntax highlighting via Prism (theme-token mapped, dark/light aware)

• Hover-revealed copy button in the top-end corner

• Language badge

You don't need to do anything — it just works.

Differences from <Tabs>

If your tabs contain prose or images, use <Tabs>. For code-only switching, <CodeGroup> is shorter and renders more compactly.

Props

The active tab is uncontrolled — initial state is the first child. There is no defaultValue prop because reordering the children is the canonical way to change the default.