Octri

CodeGroup

A code group shows several code blocks as tabs, for the same thing in different tools or languages: an install command for each package manager, or one request in each SDK.

Example

npm
npm install acme-api
mdx
<CodeGroup>
  ```bash title="npm"
  npm install acme-api
  ```
  ```bash title="pnpm"
  pnpm add acme-api
  ```
  ```bash title="yarn"
  yarn add acme-api
  ```
</CodeGroup>

Props

childrencode blocksrequired

The fenced code blocks, one per tab, in order. Each tab's label is the block's title, or its language when it has no title.

Labelling tabs

Give every block a title when two of them share a language, or both tabs read bash. Each block's options work as they do for any code block.

Python
client.customers.list(limit=10)
mdx
<CodeGroup>
  ```python title="Python"
  client.customers.list(limit=10)
  ```
  ```typescript title="TypeScript"
  await client.customers.list({ limit: 10 });
  ```
</CodeGroup>