Code groups

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.

export function Card() {
  return (
    <section className="rounded-lg border p-4">
      <h2 className="font-medium">Account overview</h2>
      <p className="text-muted-fg">Review usage before upgrading.</p>
    </section>
  )
}
<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-fg">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.

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

<CodeGroup>
 
```tsx
export const status = "ready"
```
 
```python
status = "ready"
```
 
</CodeGroup>

Was this page helpful?