---
title: "Tabs"
description: "Tabbed content, with selections shared between tab groups."
url: https://docscn.dev/docs/components/tabs
lastModified: 2026-10-08T07:54:30.000Z
---

# Tabs (/docs/components/tabs)

> Tabbed content, with selections shared between tab groups.

<Tabs items="[&#x22;pnpm&#x22;, &#x22;npm&#x22;, &#x22;yarn&#x22;]">
  <Tab>
    Install with 

    `pnpm add next-themes`

    .
  </Tab>

  <Tab>
    Install with 

    `npm install next-themes`

    .
  </Tab>

  <Tab>
    Install with 

    `yarn add next-themes`

    .
  </Tab>
</Tabs>

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/docs-tabs
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/docs-tabs
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/docs-tabs
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/docs-tabs
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

The `docs` block adds `Tabs` and `Tab` to your MDX components. Otherwise, add them to `components/mdx.tsx` or import them in a page:

```mdx
import { Tab, Tabs } from "@/components/docs/components/tabs";

<Tabs items={["pnpm", "npm", "yarn"]}>
  <Tab>Install with `pnpm add next-themes`.</Tab>
  <Tab>Install with `npm install next-themes`.</Tab>
  <Tab>Install with `yarn add next-themes`.</Tab>
</Tabs>
```

With `items`, each `Tab` matches an item by its order. Pass `value` to match a tab explicitly instead, or leave out `items` and compose the list yourself with `TabsList` and `TabsTrigger`:

```mdx
<Tabs defaultValue="react">
  <TabsList>
    <TabsTrigger value="react">React</TabsTrigger>
    <TabsTrigger value="vue">Vue</TabsTrigger>
  </TabsList>
  <TabsContent value="react">...</TabsContent>
  <TabsContent value="vue">...</TabsContent>
</Tabs>
```

## Shared and persisted selections [#shared-and-persisted-selections]

Tabs with the same `groupId` stay in sync: picking "npm" in one switches every tab group on the site with that `groupId`. The selection is kept for the session, and `persist` keeps it across visits.

```mdx
<Tabs groupId="package-manager" persist items={["pnpm", "npm", "yarn"]}>
```

## Linking to a tab [#linking-to-a-tab]

Give a `Tab` an `id`, and a link to `#id` opens that tab. A link to an element inside a tab opens the tab too. With `updateAnchor`, selecting a tab updates the URL hash to its `id`.

## Props [#props]

<TypeTable
  type="{
  items: {
    description: <>The tabs' labels, rendered as the tabs list.</>,
    type: &#x22;string[]&#x22;,
  },
  defaultIndex: {
    description: (
      <>
        The tab selected at first, with <code>{&#x22;items&#x22;}</code>.
      </>
    ),
    type: &#x22;number&#x22;,
    default: &#x22;0&#x22;,
  },
  label: {
    description: (
      <>
        Extra content at the start of the tabs list, with{&#x22; &#x22;}
        <code>{&#x22;items&#x22;}</code>.
      </>
    ),
    type: &#x22;ReactNode&#x22;,
  },
  groupId: {
    description: (
      <>
        Share the selection with other tabs that have the same{&#x22; &#x22;}
        <code>{&#x22;groupId&#x22;}</code>.
      </>
    ),
    type: &#x22;string&#x22;,
  },
  persist: {
    description: (
      <>
        Keep the selection in <code>{&#x22;localStorage&#x22;}</code> (with{&#x22; &#x22;}
        <code>{&#x22;groupId&#x22;}</code>).
      </>
    ),
    type: &#x22;boolean&#x22;,
  },
  updateAnchor: {
    description: (
      <>
        Update the URL hash to the selected tab's <code>{&#x22;id&#x22;}</code>.
      </>
    ),
    type: &#x22;boolean&#x22;,
  },
}"
/>

`Tabs` is built on shadcn/ui `tabs`, and also accepts its props, such as `defaultValue`, `value` and `onValueChange`.