Code Group

Use CodeGroup when readers need to compare multiple variants of the same code.

console.log("Hello, world");

print("Hello, world")

<CodeGroup>  ```ts title="hello.ts"  console.log("Hello, world");  ```   ```python title="hello.py"  print("Hello, world")  ```</CodeGroup>

Structure

Wrap related code blocks in one `CodeGroup`

Each fenced code block becomes a tab.

export const command = "npm install radiant-docs";

npm install radiant-docs

<CodeGroup>  ```ts title="install.ts"  export const command = "npm install radiant-docs";  ```   ```bash title="install.sh"  npm install radiant-docs  ```</CodeGroup>

Use clear tab labels with `title`

Tab labels come from each code block’s title metadata.

Common patterns

Compare package managers

npm add radiant-docs

pnpm add radiant-docs

yarn add radiant-docs

<CodeGroup>  ```bash title="npm" hideLanguageIcon  npm add radiant-docs  ```   ```bash title="pnpm" hideLanguageIcon  pnpm add radiant-docs  ```   ```bash title="yarn" hideLanguageIcon  yarn add radiant-docs  ```</CodeGroup>

Compare languages

export const sum = (a: number, b: number) => a + b;

def sum(a: int, b: int) -> int:    return a + b

package main func sum(a int, b int) int {  return a + b}

<CodeGroup>  ```ts title="sum.ts"  export const sum = (a: number, b: number) => a + b;  ```   ```python title="sum.py"  def sum(a: int, b: int) -> int:      return a + b  ```   ```go title="sum.go"  package main   func sum(a int, b int) int {    return a + b  }  ```</CodeGroup>

Props

CodeGroup is a layout container and currently does not accept props.