Code group

Code groups let you display multiple code blocks as tabs, with optional language switching. This is useful for showing the same code in different languages, or grouping related code snippets together.

Basic usage

Wrap multiple code blocks in a <CodeGroup> component. Each code block's title becomes a tab. Example:

npm install @prose-ui/react

Source:

<CodeGroup>

```bash title='npm'
npm install @prose-ui/react
```

```bash title='pnpm'
pnpm add @prose-ui/react
```

```bash title='yarn'
yarn add @prose-ui/react
```

</CodeGroup>

Language variants

When multiple code blocks share the same title but have different languages, they are grouped into a single tab with a language selector. Switching languages updates all tabs to show the selected language variant (if available). Example:

const roll = (sides: number) => Math.ceil(Math.random() * sides)

Source:

<CodeGroup>

```typescript title='Random'
const roll = (sides: number) => Math.ceil(Math.random() * sides)
```

```javascript title='Random'
const roll = (sides) => Math.ceil(Math.random() * sides)
```

```typescript title='Format'
const total = (n: number) => `$${n.toFixed(2)}`
```

```javascript title='Format'
const total = (n) => `$${n.toFixed(2)}`
```

</CodeGroup>

Synced tabs with groupId

By default, all code groups share the selected language globally. To also sync the selected tab across multiple code groups, use the groupId prop. Code groups with the same groupId will keep their active tab in sync. Try clicking a tab below — the other code group will update:

npm install @prose-ui/react

npm install @prose-ui/style

Source:

<CodeGroup groupId="install">

```bash title='npm'
npm install @prose-ui/react
```

```bash title='pnpm'
pnpm add @prose-ui/react
```

</CodeGroup>

<!-- Later on the same page... -->

<CodeGroup groupId="install">

```bash title='npm'
npm install @prose-ui/style
```

```bash title='pnpm'
pnpm add @prose-ui/style
```

</CodeGroup>