Code group

The ::code-group directive groups multiple code blocks into a tabbed view. Each child code block's tab label comes from its [bracket] filename/label.

Basic usage

pnpm add @red-glare/astro

npm install @red-glare/astro

yarn add @red-glare/astro

::code-group
```bash [pnpm]
pnpm add @red-glare/astro
```
```bash [npm]
npm install @red-glare/astro
```
```bash [yarn]
yarn add @red-glare/astro
```
::

File-aware labels + icons

When a bracket label looks like a filename or has a recognizable extension, the tab renders with a matching language icon (from Iconify's Lucide / Logos / VS Code Icons sets):

import redGlare from '@red-glare/astro'
import { defineConfig } from 'astro/config'

export default defineConfig({
  integrations: [redGlare({ title: 'My Agency Docs' })],
})

{
  "name": "my-agency-docs",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  }
}

.usa-prose h2 {
  color: var(--usa-color-primary-dark);
}

Language-only labels

If the bracket is just a label (no file extension), no icon is rendered — you get a plain text tab:

<Comark>{content}</Comark>

<Comark markdown={content} />

Keyboard navigation

The tab list implements the WAI-ARIA Authoring Practices tabs pattern:

Tabs use aria-selected, aria-controls, and tabindex="-1" on inactive tabs — only the active tab is in the focus order.

Props reference

::code-group

Child code blocks

Attributes come from the fenced block's [bracket] label:

The parser resolves iconData automatically from the filename when it matches a known language.

Source

Component: packages/astro/src/components/CodeGroup.tsx

Language icon map: packages/astro/src/components/lang-icons.ts