Code groups

Use the CodeGroup component to display multiple code examples in a tabbed interface and let readers compare implementations across languages.

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");

print('Hello World!')

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("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.

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>

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

console.log("Hello World");

print('Hello World!')

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("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>

• className (string) — Additional CSS classes to apply to the code group container.

• Examples
• Components overview
• Tabs