CodeGroup

Usage

 npm install @sewadah/selaras 

<SCodeGroup>
  <SProsePre filename="npm" language="bash" code="npm install @sewadah/selaras">
npm install @sewadah/selaras
  </SProsePre>
  <SProsePre filename="pnpm" language="bash" code="pnpm add @sewadah/selaras">
pnpm add @sewadah/selaras
  </SProsePre>
</SCodeGroup>

SCodeGroup reads its own default slot's children directly (works with any children, not just Prose ones) and renders each as a tab via Tabs - the label comes from each child's filename prop, falling back to language, falling back to Tab 1/Tab 2/... (by position) for a child with neither. Known filename/language icons appear in the tab as well. When a child is SProsePre, its header row is hidden so the label isn't repeated above the panel; this also hides that row's copy button. Other child content is rendered as provided.

In markdown

Once wired into @nuxt/content via a CodeGroup.vue adapter (same recipe as Prose), plain adjacent fenced code blocks under ::code-group become tabs automatically - the [label] after the language becomes each tab's title:

::code-group

```bash [npm]
npm install @sewadah/selaras
```

```bash [pnpm]
pnpm add @sewadah/selaras
```

::

Props

SCodeGroup takes no props - it derives everything from its children.