Tabs
Tabbed content panels with optional cross-instance synchronization via syncKey.
Installation
npx @cloudflare/nimbus-docs add tabsyarn dlx @cloudflare/nimbus-docs add tabspnpm dlx @cloudflare/nimbus-docs add tabsbunx @cloudflare/nimbus-docs add tabsPreview
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 runtimefunction 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 |
labelrequired | string |