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 @nookdocs/sdk
```

```bash yarn
yarn add @nookdocs/sdk
```

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

npm install @nookdocs/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.nookdocs.com/v1/projects \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"name": "My Docs"}'
```

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

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

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

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

Tab sync

CodeGroups with matching labels automatically sync with each other and with <Tabs> components. Click "JavaScript" in one code group, and all others with a "JavaScript" tab switch too. Selections persist across page navigations.

Disable sync on a specific group with sync={false}:

<CodeGroup sync={false}>
  ...
</CodeGroup>

Syntax highlighting + copy button

Each tab inherits the platform's code block enhancements:

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

• Copy button integrated in the header bar

• Language badge

Dropdown mode

Use the dropdown prop to show a dropdown language selector instead of inline tabs. This is useful for API reference pages with many languages.

<CodeGroup dropdown>
```bash cURL
curl -X GET https://api.nookdocs.com/v1/projects \
  -H "Authorization: Bearer $TOKEN"
```

```js JavaScript
const res = await fetch("https://api.nookdocs.com/v1/projects", {
  headers: { Authorization: `Bearer ${token}` },
});
```

```python Python
import requests
r = requests.get(
    "https://api.nookdocs.com/v1/projects",
    headers={"Authorization": f"Bearer {token}"},
)
```
</CodeGroup>

curl -X GET https://api.nookdocs.com/v1/projects \
  -H "Authorization: Bearer $TOKEN"

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.