Nuxt UI Pro v1.0 is out with dashboard components! Discount ends in 7 hours.

CodeGroup

Group code blocks together in tabs.

Usage

Wrap your code blocks around a CodeGroup component:

pnpm add @nuxt/ui
::code-group

```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```
::

Like the CodeBlock component, filenames, icons and copy buttons are automatically supported.

export default defineNuxtConfig({
  ui: {
    icons: ['heroicons', 'simple-icons']
  }
})

Config

{
  wrapper: 'relative [&>div:last-child]:!my-0 [&>div:last-child]:!static my-5',
  header: 'flex items-center gap-1 border border-gray-200 dark:border-gray-700 border-b-0 rounded-t-md overflow-hidden p-2',
  tab: {
    base: 'px-2 py-1.5 focus:outline-none text-gray-700 dark:text-gray-200 text-sm rounded-md flex items-center gap-1.5',
    active: 'bg-gray-100 dark:bg-gray-800',
    inactive: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
    icon: {
      base: ''
    }
  }
}