Code groups

Display multiple code examples in one component

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.

helloWorld.js

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

JavaScript

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>