---
title: Code group
description: Use CodeGroup to present related code snippets as selectable tabs.
---

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



<ComponentPreview>
  ````mdx
  <CodeGroup>
    ```ts title="hello.ts"
    console.log("Hello, world");
    ```

    ```python title="hello.py"
    print("Hello, world")
    ```
  </CodeGroup>
  ````
</ComponentPreview>

<Callout type="warning" title="Use fenced Markdown for one snippet">
If you only need a single example, use regular fenced Markdown code syntax
instead of `CodeGroup`. See [Format code](/edit-markdown/format-code).
</Callout>

## Structure

### Wrap related code blocks in one `CodeGroup`

Each fenced code block becomes a tab.

<ComponentPreview>
  ````mdx
  <CodeGroup>
    ```ts title="install.ts"
    export const command = "npm install radiant-docs";
    ```

    ```bash title="install.sh"
    npm install radiant-docs
    ```
  </CodeGroup>
  ````
</ComponentPreview>

### Use clear tab labels with `title`

Tab labels come from each code block's `title` metadata.

<Callout type="tip" title="Always set titles in groups">
Set a `title` on every block so tab labels stay explicit and easy to scan.
</Callout>

## Common patterns

### Compare package managers

<ComponentPreview>
  ````mdx
  <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>
  ````
</ComponentPreview>

### Compare languages

<ComponentPreview>
  ````mdx
  <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>
  ````
</ComponentPreview>

## Props

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