Skip to main content
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. 
console.log("Hello World");
Code groups inherit global styling from your docs.json file. Customize your theme using styling.codeblocks. See Settings for configuration options. Code groups automatically synchronize with other code groups and 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

To create a code group, wrap multiple code blocks with <CodeGroup> tags. Each code block must include a title, which becomes the tab label. 
<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

You can replace the tabs in a code group with a dropdown menu to toggle between languages using the dropdown prop.
helloWorld.js
console.log("Hello World");

<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>