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: ''
}
}
}