Code Group

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

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

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

Props

Prop	Type	Default	Description
`inStack`	`boolean`	`false`	Whether the code group is in a stack layout
`sync`	`string`	-	Sync identifier for syncing with other tab groups
`padded`	`boolean`	`true`	Whether to add padding around the tabs
`disableSearch`	`boolean`	`false`	Disable the search functionality
`searchPlaceholder`	`string`	`'Search Tab...'`	Placeholder text for the search input
`searchEmpty`	`string`	`'No tab found.'`	Text to display when no tab is found
`comboBoxFullWidth`	`boolean`	`false`	Whether the combobox should take full width
`class`	`string`	-	Additional classes to add to the wrapper

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>

ProseTabs - General-purpose tabbed interface

ProseMermaid - Diagram rendering in code blocks

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.