Copy page

Documentation

CodeTabs

A tabbed code block component that groups multiple code blocks into a single unified view. Useful for showing the same example in different languages or alternative commands for different package managers.

Usage

Wrap multiple fenced code blocks with <CodeTabs> and they will render as tabs. Tab labels are automatically inferred from the code block language.

Code
<CodeTabs>

```ts
const greeting: string = "Hello, world!";
console.log(greeting);
```

```js
const greeting = "Hello, world!";
console.log(greeting);
```

```py
greeting = "Hello, world!"
print(greeting)
```

</CodeTabs>

Custom Labels

Use the title meta attribute on each code block to set a custom tab label. This is especially useful when multiple code blocks share the same language.

Code
<CodeTabs>

```sh title="pnpm" icon="pnpm"
pnpm add zudoku
```

```sh title="npm" icon="npm"
npm install zudoku
```

```sh title="yarn" icon="yarn"
yarn add zudoku
```

</CodeTabs>

Synced Tabs

Use the syncKey prop to keep multiple CodeTabs instances in sync. When a user selects a tab in one group, all groups with the same syncKey update to match. The selection is persisted to localStorage and synced across browser tabs.

Code
<CodeTabs syncKey="package-manager">
```sh title="pnpm" icon="pnpm"
pnpm add zudoku
```

```sh title="npm" icon="npm"
npm install zudoku
```

</CodeTabs>

<!-- repeat above -->

Programmatic Usage

Usually it's recommended to use fenced code blocks in MDX files. However, when building reusable components (e.g. in your MDX component config), fenced code blocks aren't processed by the MDX pipeline. Use CodeTabPanel directly instead:

Code
import { CodeTabs, CodeTabPanel } from "zudoku/ui/CodeTabs";

const InstallTabs = ({ pkg }: { pkg: string }) => (
  <CodeTabs syncKey="package-manager">
    <CodeTabPanel language="sh" title="pnpm" icon="pnpm" code={`pnpm add ${pkg}`} />
    <CodeTabPanel language="sh" title="npm" icon="npm" code={`npm install ${pkg}`} />
    <CodeTabPanel language="sh" title="yarn" icon="yarn" code={`yarn add ${pkg}`} />
  </CodeTabs>
);

CodeTabPanel Props

Prop	Type	Description
code	string	The code content to display. Required.
language	string	Language for syntax highlighting and label inference.
title	string	Custom tab label. Falls back to language.
icon	string	Override the language icon (e.g. "pnpm", "npm").
meta	string	Raw meta string like in code blocks (e.g. "showLineNumbers").

Props

Prop	Type	Description
syncKey	string	Sync selected tab across all CodeTabs with the same key. Persisted to localStorage and across tabs.
hideIcon	boolean	Hide the language icon in tabs. Defaults to false.