Tabs

Tabbed content panels for showing alternatives like package managers or platform-specific instructions.

Use <Tabs> and <TabItem> to create tabbed content panels. Both components are globally available — no imports needed.

Basic Usage

npm install zudo-doc

pnpm add zudo-doc

yarn add zudo-doc

<Tabs>
  <TabItem label="npm" value="npm" default>
    ```bash
    npm install zudo-doc
    ```
  </TabItem>
  <TabItem label="pnpm" value="pnpm">
    ```bash
    pnpm add zudo-doc
    ```
  </TabItem>
  <TabItem label="yarn" value="yarn">
    ```bash
    yarn add zudo-doc
    ```
  </TabItem>
</Tabs>

The default prop on TabItem sets which tab is initially active. If omitted, the first tab is shown.

Synced Tabs

Use groupId to sync tab selection across multiple tab groups on the same page. The selected tab is persisted in localStorage, so it carries across page navigations.

console.log("Hello");

console.log("Hello" as string);

const sum = (a, b) => a + b;

const sum = (a: number, b: number): number => a + b;

<Tabs groupId="lang">
  <TabItem label="JavaScript" value="js" default>
    ```js
    console.log("Hello");
    ```
  </TabItem>
  <TabItem label="TypeScript" value="ts">
    ```ts
    console.log("Hello" as string);
    ```
  </TabItem>
</Tabs>

<!-- Selecting a tab in the group above syncs this group too -->
<Tabs groupId="lang">
  <TabItem label="JavaScript" value="js" default>
    ```js
    const sum = (a, b) => a + b;
    ```
  </TabItem>
  <TabItem label="TypeScript" value="ts">
    ```ts
    const sum = (a: number, b: number): number => a + b;
    ```
  </TabItem>
</Tabs>

Tabs Props

TabItem Props