Code groups for multi-language examples

When your product has SDKs in multiple languages, showing the same example in Python, Node.js, and Ruby use code groups to show the variations in one component. Users select the tab for the language they want to see the example in.

How code groups work

Wrap multiple code blocks in <CodeGroup /> tags. Each code block must have a filename or title, which becomes the label for that option.

Example of a code group

<CodeGroup>

```python create_user.py
client = mintlify.Client(api_key="YOUR_API_KEY")

user = client.users.create(
    name="Ada Lovelace",
    email="ada@example.com"
)
```

```javascript createUser.js
const client = new Mintlify({ apiKey: "YOUR_API_KEY" });

const user = await client.users.create({
  name: "Ada Lovelace",
  email: "ada@example.com",
});
```

```bash cURL
curl -X POST https://api.mintlify.com/users \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d '{"name": "Ada Lovelace", "email": "ada@example.com"}'
```

</CodeGroup>

client = mintlify.Client(api_key="YOUR_API_KEY")

user = client.users.create(
    name="Ada Lovelace",
    email="ada@example.com"
)

const client = new Mintlify({ apiKey: "YOUR_API_KEY" });

const user = await client.users.create({
  name: "Ada Lovelace",
  email: "ada@example.com",
});

curl -X POST https://api.mintlify.com/users \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d '{"name": "Ada Lovelace", "email": "ada@example.com"}'

Tab sync and naming consistency

Code group tabs sync with other code groups and tab components on the page. If a user selects Python in one code group or tab, all other components with a Python tab switch automatically. This only works if labels match exactly. For example, if one component uses Python and another uses Python 3, they do not sync. Establish a naming convention and use it everywhere: For pages with many language options, the default tab row can get crowded. Add the dropdown property to collapse the language selector into a dropdown menu:

<CodeGroup dropdown>

```python
# Python example
```

```javascript
// JavaScript example
```

```go
// Go example
```

```ruby
# Ruby example
```

```java
// Java example
```

</CodeGroup>

# Python example

// JavaScript example

// Go example

# Ruby example

// Java example

Next up: Conditional content — How to show different prose and components based on context that’s already established on a page.

Overview

Call out important information

Guide users through a process

Share sample code

Present content that varies by environment or stack

Show a comparison of options

Direct users to related content

Code groups for multi-language examples

How code groups work

Tab sync and naming consistency

​How code groups work

​Tab sync and naming consistency

​When to use the dropdown option

How code groups work

Tab sync and naming consistency

When to use the dropdown option