> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CodeGroup

Tabbed multi-language code block for showing the same snippet in several programming languages.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the CodeGroup playground on holydocs.com](https://holydocs.com/components/code-group).

## When to use

Use this component when source needs more context than a plain fenced block can provide, or when multiple code representations should stay synced.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Multi-language

JavaScript, Python, and Go side by side.

```javascript JavaScript
const res = await fetch('https://api.holydocs.com/v1/projects', {
  headers: { Authorization: `Bearer ${API_KEY}` },
});
const projects = await res.json();
```

```python Python
import requests

res = requests.get(
    'https://api.holydocs.com/v1/projects',
    headers={'Authorization': f'Bearer {API_KEY}'},
)
projects = res.json()
```

```go Go
req, _ := http.NewRequest("GET", "https://api.holydocs.com/v1/projects", nil)
req.Header.Set("Authorization", "Bearer "+apiKey)
client := &http.Client{}
resp, _ := client.Do(req)
```

~~~mdx
<CodeGroup>
```javascript JavaScript
const res = await fetch('https://api.holydocs.com/v1/projects', {
  headers: { Authorization: `Bearer ${API_KEY}` },
});
const projects = await res.json();
```

```python Python
import requests

res = requests.get(
    'https://api.holydocs.com/v1/projects',
    headers={'Authorization': f'Bearer {API_KEY}'},
)
projects = res.json()
```

```go Go
req, _ := http.NewRequest("GET", "https://api.holydocs.com/v1/projects", nil)
req.Header.Set("Authorization", "Bearer "+apiKey)
client := &http.Client{}
resp, _ := client.Do(req)
```
</CodeGroup>
~~~

## Props

This component has no configurable props. Use its child content to shape the output.

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<CodeGroup>
```javascript JavaScript
const res = await fetch('https://api.holydocs.com/v1/projects', {
  headers: { Authorization: `Bearer ${API_KEY}` },
});
const projects = await res.json();
```

```python Python
import requests

res = requests.get(
    'https://api.holydocs.com/v1/projects',
    headers={'Authorization': f'Bearer {API_KEY}'},
)
projects = res.json()
```
</CodeGroup>
~~~

## Tips

- Optimize for copy-paste reliability. Labels, tabs, and annotations should help readers choose the right snippet without modifying it first.
- Keep examples small enough to scan but realistic enough to survive first use in a real project.
- If the code block is critical to task completion, mirror the same example in prose so search and AI tools can recover the intent.

## Related Components

**[Code Block](/components/code-block)**

Fenced code blocks with syntax highlighting, language labels, and copy buttons.
**[Mermaid](/components/mermaid)**

Create flowcharts, sequence diagrams, Gantt charts, and other visualizations from text using Mermaid syntax.
**[Terminal](/components/terminal)**

Animated terminal replay with character-by-character typing for CLI tutorials and demos.

## More

- Interactive playground: [CodeGroup on holydocs.com](https://holydocs.com/components/code-group)
- Component library index: [/components](/components)