Code Group

Code groups display multiple code blocks as switchable tabs. Each tab is automatically labeled from the code block’s [label] metadata.

Basic usage

import { createApp } from './app'

const app = createApp()
app.listen(3000)

export function createApp() {
  return {
    listen(port: number) {
      console.log(`Listening on port ${port}`)
    }
  }
}

:::codegroup
  ```ts [index.ts]
  import { createApp } from './app'
  
  const app = createApp()
  app.listen(3000)
  ```
  
  ```ts [app.ts]
  export function createApp() {
    return {
      listen(port: number) {
        console.log(`Listening on port ${port}`)
      }
    }
  }
  ```
:::

Syntax

Wrap multiple fenced code blocks inside a :::codegroup directive. Use the [label] syntax on each code block to set the tab name:

:::codegroup
  ```language [Tab Label]
  code here
  ```
  
  ```language [Another Tab]
  code here
  ```
:::

Multi-language example

pnpm add @explainer/ui

npm install @explainer/ui

yarn add @explainer/ui