Code groups for multi-language examples

When your product has SDKs in several languages, use a code group to show the same example in Python, Node.js, Ruby, or another language. Readers can choose the version they need.

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

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

⌘I

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

Document APIs

Add visual context

Direct users to related content

Use supporting components

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