Tabs

Tabbed content panels — Starlight-compatible authoring, optional cross-instance sync via syncKey.

Installation

npx nimbus-docs add tabs

yarn dlx nimbus-docs add tabs

pnpm dlx nimbus-docs add tabs

bunx nimbus-docs add tabs

Preview

Tabs group related content so the reader sees one panel at a time.

Run nimbus-docs add tabs to copy the component into your repo.

Pass a syncKey to mirror tab state across instances on the page.

<Tabs>
<TabItem label="Overview">
  Tabs group related content so the reader sees one panel at a time.
</TabItem>
<TabItem label="Install">
  Run `nimbus-docs add tabs` to copy the component into your repo.
</TabItem>
<TabItem label="Configure">
  Pass a `syncKey` to mirror tab state across instances on the page.
</TabItem>
</Tabs>

Examples

Basic

Three tabs with text bodies — triggers are synthesised from each label prop.

First panel content.

Second panel content.

Third panel content.

<Tabs>
<TabItem label="One">First panel content.</TabItem>
<TabItem label="Two">Second panel content.</TabItem>
<TabItem label="Three">Third panel content.</TabItem>
</Tabs>

Synced

Two Tabs instances with the same syncKey mirror each other — pick a tab once, every matching instance follows.

type User = {{ id: string }};

// inferred at runtime

function load(id: string) {{ ... }}

function load(id) {{ ... }}

<Tabs syncKey="lang">
<TabItem label="TypeScript">type User = { id: string };</TabItem>
<TabItem label="JavaScript">// inferred at runtime</TabItem>
</Tabs>

<Tabs syncKey="lang">
<TabItem label="TypeScript">function load(id: string) { ... }</TabItem>
<TabItem label="JavaScript">function load(id) { ... }</TabItem>
</Tabs>

API reference

Every prop the component accepts, sourced from a single declaration.

Prop	Type
`syncKey`	`string`
`label` required	`string`