> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.

---
title: Code Groups
description: Group multiple code blocks into a single tabbed code surface.
icon: code-xml
---

# Code Groups

Use `CodeGroup` when a single example needs multiple language or package-manager variants. Holocron rewrites it to `Tabs` at parse time, so each titled code fence becomes a tab.

<Tabs items={["app.ts", "docs.json"]}>
  <Tab title="app.ts">
    ```ts
    import { defineConfig } from 'vite'
    import { holocron } from '@holocron.so/vite'

    export default defineConfig({
      plugins: [holocron()],
    })
    ```
  </Tab>

  <Tab title="docs.json">
    ```json
    {
      "name": "Holocron Docs",
      "navigation": [{ "group": "Guides", "pages": ["index"] }]
    }
    ```
  </Tab>
</Tabs>

<Tabs items={["pnpm", "npm"]}>
  <Tab title="pnpm">
    ```bash
    pnpm add @holocron.so/vite react react-dom vite
    ```
  </Tab>

  <Tab title="npm">
    ```bash
    npm install @holocron.so/vite react react-dom vite
    ```
  </Tab>
</Tabs>

## Holocron differences

* Holocron supports the core `CodeGroup` authoring flow: multiple titled fences become tabs.
* Mintlify documents synchronized groups and dropdown presentation. Holocron currently focuses on the tabbed rendering path.


---

*Powered by [holocron.so](https://holocron.so)*