# Code groups
Use code groups for language choices, framework variants, and synced implementation examples.
Source: /docs/components/code-groups
Last modified: 2026-06-20
Code groups keep parallel examples together. Use them when the reader chooses one language or framework path.

## Language tabs

Mintlify code groups can infer their labels from titled code fences.


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

```python title="hello_world.py"
print("Hello World!")
```

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


````mdx title="code-group-basic.mdx"


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

```python title="hello_world.py"
print("Hello World!")
```

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


````

## Plandalf language tabs


### Open checkout


```html title="button.html"
<button data-plandalf-present="pro-plan">
  Buy Pro
</button>
```

```js title="present.js"
await plandalf.present("pro-plan");
```


````mdx title="code-group-example.mdx"

### Open checkout


```html title="button.html"
<button data-plandalf-present="pro-plan">
  Buy Pro
</button>
```

```js title="present.js"
await plandalf.present("pro-plan");
```


````

## Synced language choice

Matching labels sync across code groups and tabs by default. The selected label is remembered as readers move between docs pages, so they can choose JavaScript once and stay on JavaScript for later examples.


### HTML


    Use markup-driven checkout behavior.


### JavaScript


    Use client-side SDK calls.


### Same label sync


```html title="button.html"
<button data-plandalf-present="pro-plan">Buy Pro</button>
```

```js title="present.js"
await plandalf.present("pro-plan");
```


## Dropdown selector

Use `dropdown` when labels are long or when the group has more options than fit comfortably in the tab bar.


### Install package


```bash title="npm"
npm install @plandalf/js
```

```bash title="pnpm"
pnpm add @plandalf/js
```

```bash title="yarn"
yarn add @plandalf/js
```


````mdx title="dropdown-code-group.mdx"

### Install package


```bash title="npm"
npm install @plandalf/js
```

```bash title="pnpm"
pnpm add @plandalf/js
```

```bash title="yarn"
yarn add @plandalf/js
```


````

## Unsynced groups

Turn sync off when labels repeat but the choices are unrelated.


### Response examples


```json title="success.json"
{ "status": "complete" }
```

```json title="error.json"
{ "message": "Offer not found" }
```


## Properties


- `children` (ReactNode; required):
  Code fences inside the group. Each fence should include a language and a title or filename so the selector can show a readable label.


- `dropdown` (boolean; default: false):
  Replace tabs with a dropdown menu to toggle between languages or examples.


## Plandalf extensions


- `title` (string):
  Optional heading shown in the control bar.


- `labels` (string[]):
  Override labels for each code fence. Use this when filenames should stay in code headers but the selector should show broader choices such as `HTML`, `JavaScript`, or `npm`.


- `sync` (boolean; default: true):
  Keep language selection synced across code groups and tabs with matching labels. Synced selections are also restored on later docs pages that contain the same label.


- `class | className` (string):
  Optional local utility classes.


## Authoring rules

- Use code groups for equivalent snippets, not for sequential steps.
- Give each fence a language so the header can show `JavaScript`, `Shell`, `JSON`, or the right readable label.
- Use `labels` when fence titles are filenames but the selector should show a broader language or package manager.
- Use `dropdown` for long labels or three-plus dense options.
- Set `sync={false}` for examples like `Success` and `Error` that should not control other code groups.

## Related


  - [Tabs](/docs/components/tabs): Use for broader content views.
  - [Examples](/docs/components/examples): Use for request and response samples.
  - [API examples](/docs/components/api-fields-examples): Attach examples to endpoints.