# Code groups (/components/code-groups)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 908 · updated: 2026-07-30 -->
Related: [Accordions](/components/accordions.md), [Badge](/components/badge.md), [Banner](/components/banner.md), [Callouts](/components/callouts.md), [Cards](/components/cards.md), [Color](/components/color.md)

Use the `CodeGroup` component to display multiple code blocks in a tabbed interface, allowing users to compare implementations across different programming languages or see alternative approaches for the same task.

<CodeGroup>
  <CodeBlockTabs defaultValue="helloWorld.js" groupId="hello-world-py+helloworld-java+helloworld-js">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="helloWorld.js">
        helloWorld.js
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="hello_world.py">
        hello_world.py
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="HelloWorld.java">
        HelloWorld.java
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="helloWorld.js">
      ```javascript  
      console.log("Hello World");
      ```
    </CodeBlockTab>

    <CodeBlockTab value="hello_world.py">
      ```python  
      print('Hello World!')
      ```
    </CodeBlockTab>

    <CodeBlockTab value="HelloWorld.java">
      ```java  
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</CodeGroup>

Code groups inherit global styling from your `docs.json` file. Customize your theme using `styling.codeblocks`. See [Settings](/organize/settings-appearance#styling) for configuration options.

Code groups automatically synchronize with other code groups and [tabs](/components/tabs) on the same page when their labels match. When you select a language in one code group, all tabs and code groups with matching labels update to show the same language.

## Create code groups [#create-code-groups]

To create a code group, wrap multiple code blocks with `<CodeGroup>` tags. Each code block must include a title, which becomes the tab label.

````mdx
<CodeGroup>

```javascript helloWorld.js
console.log("Hello World");
```

```python hello_world.py
print('Hello World!')
```

```java HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```

</CodeGroup>
````

## Language dropdown [#language-dropdown]

You can replace the tabs in a code group with a dropdown menu to toggle between languages using the `dropdown` prop.

<CodeGroup>
  <CodeBlockTabs defaultValue="helloWorld.js" groupId="hello-world-py+helloworld-java+helloworld-js">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="helloWorld.js">
        helloWorld.js
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="hello_world.py">
        hello_world.py
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="HelloWorld.java">
        HelloWorld.java
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="helloWorld.js">
      ```javascript  
      console.log("Hello World");
      ```
    </CodeBlockTab>

    <CodeBlockTab value="hello_world.py">
      ```python  
      print('Hello World!')
      ```
    </CodeBlockTab>

    <CodeBlockTab value="HelloWorld.java">
      ```java  
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</CodeGroup>

````mdx highlight=1
<CodeGroup dropdown>

```javascript helloWorld.js
console.log("Hello World");
```

```python hello_world.py
print('Hello World!')
```

```java HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```
</CodeGroup>
````