---
title: Code groups
description: Group related code examples into tabs or a compact menu selector.
---

## Usage

Wrap multiple fenced code blocks with `CodeGroup`. The fence language controls syntax highlighting, and the text after the language becomes the file label.

<CodeGroup>

```tsx card.tsx
export function Card() {
  return (
    <section className="rounded-lg border p-4">
      <h2 className="font-medium">Account overview</h2>
      <p className="text-muted-foreground">Review usage before upgrading.</p>
    </section>
  )
}
```

```php card.php
<?php

function render_card(): string
{
    return '<section class="card">Account overview</section>';
}
```

```python card.py
def render_card():
    return {
        "title": "Account overview",
        "description": "Review usage before upgrading.",
    }
```

</CodeGroup>

````tsx
<CodeGroup>
```tsx card.tsx
export function Card() {
  return (
    <section className="rounded-lg border p-4">
      <h2 className="font-medium">Account overview</h2>
      <p className="text-muted-foreground">Review usage before upgrading.</p>
    </section>
  )
}
```

```php card.php
<?php

function render_card(): string
{
    return '<section class="card">Account overview</section>';
}
```
```python card.py
def render_card():
    return {
        "title": "Account overview",
        "description": "Review usage before upgrading.",
    }
```
</CodeGroup>
````

## As Menu

Use `asMenu` when you want the header to show the active file name while the selector uses the language labels. Selecting `php`, for example, switches the visible file to `profile-form.php`.

<CodeGroup asMenu>

```tsx profile-form.tsx
export function ProfileForm() {
  return (
    <form className="grid gap-3">
      <input name="name" placeholder="Name" />
      <button type="submit">Save</button>
    </form>
  )
}
```

```php profile-form.php
  <?php

  $fields = [
      'name' => 'Name',
      'email' => 'Email address',
  ];
```

```python profile_form.py
  fields = {
      "name": "Name",
      "email": "Email address",
  }
```
</CodeGroup>

````tsx
<CodeGroup asMenu>
  ```tsx profile-form.tsx
    ...
  ```

  ```php profile-form.php
    ...
  ```

  ```python profile_form.py
     ...
  ```
</CodeGroup>
````

## Labels

The label is optional. If you omit it, the language name is used.

````tsx
<CodeGroup>

```tsx
export const status = "ready"
```

```python
status = "ready"
```

</CodeGroup>
````