Tabs

Group alternative content behind labeled tabs.

Group alternatives such as package managers, framework variants, or OS-specific commands so the reader sees one at a time. Give each TabItem a label; Tabs builds the tab row from them, so there is nothing to keep in sync.

			npm i -D svelte-docsmith

			pnpm add -D svelte-docsmith

			yarn add -D svelte-docsmith

Usage

Leave blank lines around the content inside each TabItem so the markdown (code fences, prose) is parsed. The first tab is selected by default; pass value on Tabs to start on a different one.

			<script>
	import { Tabs, TabItem } from 'svelte-docsmith';
</script>

<Tabs>
	<TabItem label="npm">

```bash
npm i -D svelte-docsmith
```

	</TabItem>
	<TabItem label="pnpm">

```bash
pnpm add -D svelte-docsmith
```

	</TabItem>
</Tabs>

Synced tabs

Give related Tabs the same syncKey and they share one selection: pick pnpm in any block and every block with that key switches to pnpm, across the page and the rest of the site. The choice is remembered across reloads. Use it for package managers, runtimes, or any choice a reader makes once and keeps.

Try it. These two blocks share syncKey="demo-pm"; changing one moves the other:

			npm i -D svelte-docsmith

			pnpm add -D svelte-docsmith

			yarn add -D svelte-docsmith

			npx sv add svelte-docsmith

			pnpm dlx sv add svelte-docsmith

			yarn dlx sv add svelte-docsmith

API reference

Tabs

value string default first tab

Label of the tab selected by default.

syncKey string

Sync group. Blocks with the same key share their selection and remember it across reloads.

TabItem

label required string

The tab's trigger text.

value string default label

Underlying value, only needed to disambiguate duplicate labels.