Prose

Code Group

Display multiple code snippets in a tabbed interface with automatic language detection, custom icons, and sync support across groups.

Source Code

Overview

The ProseCodeGroup component creates a tabbed interface for displaying multiple code blocks. It's perfect for showing the same functionality in different languages, comparing implementations, or displaying related configuration files side by side.

Features
  • Automatic Language Icons - Detects language from code fence and shows appropriate icon
  • Custom Icons - Override with custom icons per tab
  • Tab Sync - Synchronize selections across multiple code groups
  • Search Functionality - Quick tab search for groups with many options
  • Responsive Design - Works seamlessly on all screen sizes

Basic Usage

Use the ::prose-code-group wrapper with code fences. The filename in brackets becomes the tab label:

Multi-Language Examples

Component Implementation

Show how to create the same component in different frameworks:

API Requests

Compare different HTTP client libraries:

Configuration Files

Framework Setup

Show related configuration files together:

Environment Variables

Synced Code Groups

Use the sync prop to keep tab selections synchronized across multiple code groups on the same page:

Installation

Run Dev Server

Try It!
Click between tabs above - both groups stay synchronized because they use sync="package-manager".

Custom Icons

Override default language icons with custom ones:

Testing Examples

Unit Tests

Database Schemas

Prisma Schema

Styling Examples

CSS Solutions

Syntax

Basic Structure

::prose-code-group

```language [Tab Name]
code here
```

```language [Another Tab]
more code
```

::

With Props

::prose-code-group{sync="my-group" padded=false}

```ts [Option 1]
const a = 1
```

```ts [Option 2]
const b = 2
```

::

With Icons

::prose-code-group

```ts [server.ts] icon="lucide:server"
// server code
```

```ts [client.ts] icon="lucide:smartphone"
// client code
```

::

Search Functionality

For code groups with many tabs, users can search:

Search Tips
When you have 5 or more tabs, the Combobox variant is automatically used to help users find tabs quickly.

Real-World Use Cases

API Routes

Docker Setup

GitHub Actions

Best Practices

Tips for Code Groups
  • Use descriptive tab names that clearly indicate what the code does
  • Keep the number of tabs reasonable (5-10 max for best UX)
  • Use sync prop when showing package manager commands across multiple groups
  • Add custom icons to make tabs more visually distinct
  • Use noFormat meta flag if you want to preserve exact filename formatting
  • Use hideHeader meta flag if you want to hide the tab header
  • Consider grouping related code (configs, routes, tests) together

Accessibility

The component provides excellent keyboard navigation:

  • Tab - Move between tabs
  • Enter/Space - Activate selected tab
  • Arrow Keys - Navigate tabs in the list
  • Type to Search - Quick search when many tabs are present

Screen readers announce tab labels and active states properly.

Vue Component Usage

You can also use it programmatically in Vue files:

<template>
  <ProseCodeGroup sync="my-group">
    <ProsePre filename="example.ts" language="typescript" :code="code1" />
    <ProsePre filename="another.ts" language="typescript" :code="code2" />
  </ProseCodeGroup>
</template>

<script setup>
  const code1 = "const a = 1";
  const code2 = "const b = 2";
</script>

Code Collapse

A collapsible code block wrapper, perfect for showing long code examples without overwhelming your documentation.

Code Snippet

Dynamically import and display code from your project files or external URLs without duplicating content in your documentation.