Code Group

Installation#

npx @ravikumarsurya/mdx-ui add code-group

Also install code-block if you haven't already — CodeGroup is designed to wrap CodeBlock children:

npx @ravikumarsurya/mdx-ui add code-block

Usage#

Wrap multiple fenced code blocks inside <CodeGroup>. Add a title annotation to each fence to set the tab label. Without a title, the language name is used.

<CodeGroup>
  ```bash title="npm" npm install my-package ``` ```bash title="pnpm" pnpm add
  my-package ``` ```bash title="yarn" yarn add my-package ```
</CodeGroup>

Examples#

Package manager install#

Multiple languages#

const greeting = (name: string): string => {
  return `Hello, ${name}!`
}

Framework config#

import createMDX from "@next/mdx"
 
const withMDX = createMDX({})
export default withMDX({ pageExtensions: ["mdx", "tsx"] })
 

How it works#

CodeGroup reads data-title and data-language from each child's props — attributes set by rehype-pretty-code on <pre> elements. These become the tab labels. The active tab's <code> content is rendered inside a single <pre>, so Shiki CSS variables apply correctly.

Without rehype-pretty-code, code fences still work — tabs fall back to the language name, and code is shown without syntax highlighting.

Props#

Tab labels#