Tabs

::tabs{sync="os"}
:::tabs-item{label="macOS"}
Press **⌘K** to find the pigeon data.
:::

:::tabs-item{label="Windows"}
Press **Ctrl+K** to find the pigeon data.
:::
::

pnpm add comark-tabs

npm install comark-tabs

yarn add comark-tabs

::code-group{sync="pm"}
```sh [pnpm]
pnpm add comark-tabs
```

```sh [npm]
npm install comark-tabs
```

```sh [yarn]
yarn add comark-tabs
```
::

pnpm add comark-tabs

npm install comark-tabs

yarn add comark-tabs

::code-group{sync="pm"}
```sh [pnpm] icon=logos:pnpm
pnpm add comark-tabs
```

```sh [npm] icon=logos:npm-icon
npm install comark-tabs
```

```sh [yarn] icon=logos:yarn
yarn add comark-tabs
```
::

npm install -D comark-tabs

pnpm add -D comark-tabs

yarn add --dev comark-tabs

bun add --dev comark-tabs

```sh npm2yarn
npm install -D comark-tabs
```

Without a script, every tab shows under its label, one after another. The script adds:

• The tab strip, whose highlight slides to the tab you pick.
• Arrow keys to move between tabs.
• sync, which switches every block with the same key at once and remembers the choice.

Each :::tabs-item inside ::tabs is a tab, named by its label.

::tabs
:::tabs-item{label="This week"}
14 rubber ducks bought, 14 bugs fixed.
:::

:::tabs-item{label="Last week"}
3 rubber ducks bought, 3 bugs fixed.
:::
::

One tab. It holds any Markdown, even other tabs.

Code blocks as tabs, each named by the label in brackets after its language. The label becomes the tab, so the code block doesn't repeat it, and the tabs sit in a header joined to the block. Without a script, each block keeps its label as a header of its own.

pnpm add comark-tabs

npm install comark-tabs

::code-group{sync="pm"}
```sh [pnpm]
pnpm add comark-tabs
```

```sh [npm]
npm install comark-tabs
```
::

A code block takes an icon after its label, as icon=logos:pnpm.

A code block with npm2yarn after its language holds npm commands and becomes a code group with a tab for each package manager: npm, pnpm, yarn, and bun. It has sync="pm", so it switches with the code groups you write with that key.

npm install -D comark-tabs
npx nuxi@latest module add ui

pnpm add -D comark-tabs
pnpm dlx nuxi@latest module add ui

yarn add --dev comark-tabs
yarn dlx nuxi@latest module add ui

bun add --dev comark-tabs
bunx nuxi@latest module add ui

```sh npm2yarn
npm install -D comark-tabs
npx nuxi@latest module add ui
```

Only lines that start with npm or npx, or commands after &&, ||, or ;, change, so cd my-npm-app stays as written. npm-to-yarn converts them, and bun's tab writes bunx and bun create as Bun's docs do. In a ::code-group the block is one tab already, and npm2yarn does nothing. Set the managers with the managers option.

The tabs follow the WAI-ARIA tabs pattern. Tab moves focus into the strip and on to the open panel. The left and right arrow keys move between tabs and open them. They wrap at the ends and follow the reading direction. Home and End go to the first and last tab.

Blocks with the same sync switch together by label, so ::code-group{sync="pm"} on every install snippet keeps the reader's package manager. The script saves the choice in localStorage under comark-tabs: and the key, and restores it on the next page that uses it.

When a switch changes the height of blocks above the one the reader clicked, the page scrolls by as much, so the tab stays under the pointer.

A code block marked npm2yarn gets a tab for npm, pnpm, yarn, and bun, in that order. Set others, in the order you want, with managers; Deno is there to add:

tabs({ managers: ["pnpm", "npm", "yarn", "bun", "deno"] });

A command a manager has no form for, such as npm ci in pnpm, leaves that manager's tab out, keeps npm's, and adds an issue. Write that block as a ::code-group{sync="pm"} by hand. Register comark-tabs before Shiki, so Shiki highlights every tab it adds.

Give a tab an icon, either an Iconify name, such as lucide:apple or logos:pnpm, or the URL of an image. comark-icon resolves it while parsing and draws it. The icon shows before the label in the strip, shows without the script, and looks and sizes like an :icon.

::tabs
:::tabs-item{label="macOS" icon="lucide:apple"}
Press **⌘K** to search.
:::

:::tabs-item{label="Windows" icon="lucide:monitor"}
Press **Ctrl+K** to search.
:::
::

Set icons once for every block with icons, by label, for tabs that don't set their own. Icons come from the Iconify API by default. Pass the resolver the page's :icon uses as iconResolver, so they share its sets and fetch:

import { icons as logos } from "@iconify-json/logos";
import icon, { createIcons } from "comark-icon/html";
import tabs from "comark-tabs/html";

const icons = createIcons({ collections: { logos } });
const plugins = [
  icon(icons),
  tabs({ iconResolver: icons, icons: { pnpm: "logos:pnpm", npm: "logos:npm-icon" } }),
];

Size them with --comark-icon-size, and style them as comark-icon's theme describes.

The plugin adds a problem with any block to meta.issues, as Validation describes:

`::code-group` 1, block 2: a code block needs a label. Put it in brackets after the language: ```bash [npm].

It reports:

• A tab without a label, or two tabs with the same label.
• An npm2yarn command a package manager has no form for, or an npm2yarn block with no npm command.
• An icon it can't draw, in comark-icon's words.
• Content outside every tab, which doesn't render.
• Anything but code blocks in a code group.
• A block with no tabs.
• A :::tabs-item outside ::tabs, which renders as plain content.
• A prop the block doesn't read.

Each one has its own rule in Doctor. Rendering never throws.

Images in tabs zoom with comark-zoom like any other image. A gallery or zoom group only pages through what's shown, so images in closed tabs stay out of it.

The options go under tabs in comarkUi(), or to tabs() when you use it alone.

comark-ui brings comark-tabs and registers it. To use it alone, install it and pass the renderer's components:

pnpm add comark @comark/html comark-tabs

import { createHtmlRenderer } from "@comark/html";
import tabs, { components } from "comark-tabs/html";

const render = createHtmlRenderer({ plugins: [tabs()], components });

For Vue, React, or Svelte, import from comark-tabs/vue, comark-tabs/react, or comark-tabs/svelte. Svelte needs 5.20 or later. Renderers covers server rendering and using it with other plugins.

The tab strip is a segmented control in the style of shadcn/ui, and follows the shared tokens in Theming. Five variables of its own change the strip, the open tab, and the space under them. The rules sit in a comark CSS layer, so a plain rule of your own wins over any of them.

Set these on .ct or any ancestor, such as :root:

Icons in tabs come from comark-icon: size them with --comark-icon-size, as its theming describes.

One rule sits outside the comark layer: pages style code blocks with plain rules, so the rule that drops a code group's block margin and top corners, to join it to its strip, has to beat them.

An open tab in the page's brand color:

:root {
  --ct-active: oklch(0.55 0.2 260);
  --ct-active-text: white;
}

To try it, paste it into Extra CSS in the playground's Theme pane.