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

## Basic Usage

[Dynamic content unavailable in text export]

  [Dynamic content unavailable in text export]
    ```bash
    npm install zudo-doc
    ```
  
  [Dynamic content unavailable in text export]
    ```bash
    pnpm add zudo-doc
    ```
  
  [Dynamic content unavailable in text export]
    ```bash
    yarn add zudo-doc
    ```
  



````mdx
<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.

[Dynamic content unavailable in text export]

  [Dynamic content unavailable in text export]
    ```js
    console.log("Hello");
    ```
  
  [Dynamic content unavailable in text export]
    ```ts
    console.log("Hello" as string);
    ```
  



[Dynamic content unavailable in text export]

  [Dynamic content unavailable in text export]
    ```js
    const sum = (a, b) => a + b;
    ```
  
  [Dynamic content unavailable in text export]
    ```ts
    const sum = (a: number, b: number): number => a + b;
    ```
  



````mdx
<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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `groupId` | string | — | Sync tab selection across groups with the same `groupId` (persisted in localStorage) |

## TabItem Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | string | (required) | Tab button text |
| `value` | string | Value of `label` | Unique identifier for the tab |
| `default` | boolean | `false` | Set as the initially active tab |