ProseCodeGroup

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.

pnpm add pohon-ui

yarn add pohon-ui

npm install pohon-ui

bun add pohon-ui

::code-group

```bash [pnpm]
pnpm add pohon-ui
```

```bash [yarn]
yarn add pohon-ui
```

```bash [npm]
npm install pohon-ui
```

```bash [bun]
bun add pohon-ui
```

::

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

API

Props

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

Slots

Slot	Type
`default`	`{}`

Theme

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-border-muted bg-background border-b-0 rounded-t-md overflow-x-auto p-2',
          indicator: 'absolute left-0 inset-y-2 w-$akar-tabs-indicator-size translate-x-$akar-tabs-indicator-position transition-[transform,width] duration-280 bg-background-elevated rounded-md shadow-xs',
          trigger: [
            'relative inline-flex items-center gap-1.5 color-text data-[state=active]:color-text-highlighted hover:bg-background-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3',
            'transition-colors'
          ],
          triggerIcon: 'size-4 shrink-0',
          triggerLabel: 'truncate'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      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-border-muted bg-background border-b-0 rounded-t-md overflow-x-auto p-2',
              indicator: 'absolute left-0 inset-y-2 w-$akar-tabs-indicator-size translate-x-$akar-tabs-indicator-position transition-[transform,width] duration-280 bg-background-elevated rounded-md shadow-xs',
              trigger: [
                'relative inline-flex items-center gap-1.5 color-text data-[state=active]:color-text-highlighted hover:bg-background-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3',
                'transition-colors'
              ],
              triggerIcon: 'size-4 shrink-0',
              triggerLabel: 'truncate'
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

CodeCollapse

Make long code blocks collapsible to save space and improve readability.

CodePreview

Display code examples with a preview and their source for clearer documentation.