CodeGroup

Use a tabbed layout to present multiple code snippets for a clearer view.

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

pnpm add @bitrix24/b24ui-nuxt

yarn add @bitrix24/b24ui-nuxt

npm install @bitrix24/b24ui-nuxt

bun add @bitrix24/b24ui-nuxt

::code-group

```bash [pnpm]
pnpm add @bitrix24/b24ui-nuxt
```

```bash [yarn]
yarn add @bitrix24/b24ui-nuxt
```

```bash [npm]
npm install @bitrix24/b24ui-nuxt
```

```bash [bun]
bun add @bitrix24/b24ui-nuxt
```

::

Like the ProsePre component, the CodeGroup handles filenames, icons and copy button.

API

Props

Prop	Default	Type
`defaultValue`	`'0'`	`string` The default tab to select.
`sync`		`string` Sync the selected tab with a local storage key.
`modelValue`		`string`
`b24ui`		`{ root?: ClassNameValue; list?: ClassNameValue; indicator?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    prose: {
      codeGroup: {
        slots: {
          root: 'relative group *:not-first:!my-0 *:not-first:!static my-5',
          list: 'relative flex items-center gap-1 border border-(--ui-color-design-tinted-na-stroke) bg-(--ui-color-bg-content-secondary) 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-(--ui-color-design-selection-bg) rounded-md shadow-xs',
          trigger: 'relative inline-flex items-center gap-1.5 text-(--b24ui-typography-legend-color) data-[state=active]:text-(--b24ui-typography-legend-color) hover:bg-(--ui-color-design-selection-bg) px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-30 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-color-accent-soft-element-blue) focus:outline-none transition-colors',
          triggerIcon: 'size-4 shrink-0',
          triggerLabel: 'truncate'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        prose: {
          codeGroup: {
            slots: {
              root: 'relative group *:not-first:!my-0 *:not-first:!static my-5',
              list: 'relative flex items-center gap-1 border border-(--ui-color-design-tinted-na-stroke) bg-(--ui-color-bg-content-secondary) 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-(--ui-color-design-selection-bg) rounded-md shadow-xs',
              trigger: 'relative inline-flex items-center gap-1.5 text-(--b24ui-typography-legend-color) data-[state=active]:text-(--b24ui-typography-legend-color) hover:bg-(--ui-color-design-selection-bg) px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-30 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-color-accent-soft-element-blue) focus:outline-none transition-colors',
              triggerIcon: 'size-4 shrink-0',
              triggerLabel: 'truncate'
            }
          }
        }
      }
    })
  ]
})

CodeCollapse

Add toggle functionality for lengthy code sections to optimize layout.

CodePreview

For clearer docs, pair code snippets with their visual output and source.

CodeGroup

Usage

API

Props

Slots

Theme