Tabs

Show alternative versions of the same content, such as package manager commands.

Tabs let readers switch between variants of the same content. The most common use is one install command per package manager.

Usage#

bash

pnpm add pzzadocs

bash

npm install pzzadocs

bash

yarn add pzzadocs

mdx

<Tabs items={["pnpm", "npm", "yarn"]}>
  <Tab value="pnpm">

```bash
pnpm add pzzadocs
```

  </Tab>
  <Tab value="npm">

```bash
npm install pzzadocs
```

  </Tab>
  <Tab value="yarn">

```bash
yarn add pzzadocs
```

  </Tab>
</Tabs>

items declares the tab labels in order. Each Tab needs a value that matches one of the labels; the first item is selected by default.

Any content#

Tab bodies are not limited to code. Any Markdown or MDX works, including other components.

PzzaDocs targets the App Router. Routes are files under app/ and pages are React Server Components, which is what lets MDX compile on the server.

The Pages Router is not supported. createSource relies on async server components and the params promise shape introduced with the App Router.

mdx

<Tabs items={["App Router", "Pages Router"]}>
  <Tab value="App Router">
    PzzaDocs targets the App Router.
  </Tab>
  <Tab value="Pages Router">
    The Pages Router is not supported.
  </Tab>
</Tabs>

Blank lines around fenced code

When placing a fenced code block inside a Tab, leave an empty line before and after the fence. MDX needs the blank line to switch from JSX back to Markdown parsing.

Props#

Tabs#

Prop	Type	Description
`items`	`string[]`	Tab labels, in display order. Required.
`defaultIndex`	`number`	Index of the tab that is open initially. Defaults to `0`.
`persist`	`string`	Storage key. When set, the selected tab is remembered in local storage and shared by every `Tabs` on the site that uses the same key. Handy for package manager choice.
`children`	`ReactNode`	One `Tab` per item.

Tab#

Prop	Type	Description
`value`	`string`	Must match an entry in `items`. Required.
`children`	`ReactNode`	Panel content.