---
title: "CodeGroup"
description: "Group multiple code examples in tabbed interfaces for easy comparison."
canonical_url: "https://ui.nuxt.com/docs/typography/code-group"
last_updated: "2026-05-07"
---
# CodeGroup

> Group multiple code examples in tabbed interfaces for easy comparison.

## Usage

Wrap your code blocks around a `code-group` component to group them together in tabs.

```vue
<template>
  <__flatten>
  <pre className=language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=pnpm add @nuxt/ui
   filename=pnpm language=bash meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sBMFI>
  pnpm</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span></code></pre>
  <pre className=language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=yarn add @nuxt/ui
   filename=yarn language=bash meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sBMFI>
  yarn</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span></code></pre>
  <pre className=language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=npm install @nuxt/ui
   filename=npm language=bash meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sBMFI>
  npm</span>
  <span class=sfazB>
   install</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span></code></pre>
  <pre className=language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=bun add @nuxt/ui
   filename=bun language=bash meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sBMFI>
  bun</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span></code></pre></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::code-group
  
  ```bash [pnpm]
  pnpm add @nuxt/ui
  ```
  
  ```bash [yarn]
  yarn add @nuxt/ui
  ```
  
  ```bash [npm]
  npm install @nuxt/ui
  ```
  
  ```bash [bun]
  bun add @nuxt/ui
  ```
  
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  code-group
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  bash [pnpm]
  </span></span>
  <span class=line>
  <span class=sBMFI>
  pnpm</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  bash [yarn]
  </span></span>
  <span class=line>
  <span class=sBMFI>
  yarn</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  bash [npm]
  </span></span>
  <span class=line>
  <span class=sBMFI>
  npm</span>
  <span class=sfazB>
   install</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  bash [bun]
  </span></span>
  <span class=line>
  <span class=sBMFI>
  bun</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

> [!NOTE]
> See: /docs/typography/code#code-blocks
> 
> Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button.

## API

### Props

```ts
/**
 * Props for the ProseCodeGroup component
 */
interface ProseCodeGroupProps {
  /**
   * The default tab to select.
   * @default "\"0\""
   */
  defaultValue?: string | undefined;
  /**
   * Sync the selected tab with a local storage key.
   */
  sync?: string | undefined;
  ui?: { root?: ClassNameValue; list?: ClassNameValue; indicator?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; } | undefined;
  modelValue?: string | undefined;
}
```

### Slots

```ts
/**
 * Slots for the CodeGroup component
 */
interface CodeGroupSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      codeGroup: {
        slots: {
          root: 'relative group *:not-first:my-0! *:not-first:static! my-5',
          list: 'relative flex items-center gap-1 border border-muted bg-default border-b-0 rounded-t-md overflow-x-auto p-2',
          indicator: 'absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 bg-elevated rounded-md shadow-xs',
          trigger: [
            'relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none',
            'transition-colors'
          ],
          triggerIcon: 'size-4 shrink-0',
          triggerLabel: 'truncate'
        }
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/CodeGroup.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/code-group.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.