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.

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