Tabs

Let readers switch between related examples or platform-specific content.

npm install @heyo-sh/heyo-docs

<Tabs>
<Tab title="npm">npm install @heyo-sh/heyo-docs</Tab>
<Tab title="pnpm">pnpm add @heyo-sh/heyo-docs</Tab>
</Tabs>

Tabs presents related content one panel at a time. It is useful for package manager commands, framework-specific instructions, language variants, and short comparisons where readers need only one option to complete the task.

Give every panel a clear label

Each Tab uses title as its visible label, with label available as an alias. The first tab opens by default. Add a value when you need a stable key and set defaultValue to choose a different initial panel.

Import the package with full type information.

Keep the number of tabs small and make their content equivalent in purpose. Place sequential steps in Steps instead; tabs can hide information readers must see in order.

Compare publishing targets

Tabs can make an overview feel more like a tailored guide when every platform has the same goal but a different starting point.

Best for Next.js

Connect the repository and let Vercel detect the framework automatically.

<Tabs defaultValue="vercel" variant="line">
<Tab title="Vercel" value="vercel">
  <Callout type="tip" title="Best for Next.js">
    Connect the repository and let Vercel detect the framework automatically.
  </Callout>
</Tab>
<Tab title="Cloudflare" value="cloudflare">
  Deploy the generated site to Pages when your team already uses Cloudflare.
</Tab>
<Tab title="Static host" value="static">
  Upload the build output to any host that serves static files.
</Tab>
</Tabs>

Properties

childrenTab[]optional

Direct Tab elements to render as tab panels.

defaultValuestringoptional

The value of the panel shown initially. It defaults to the first tab's explicit or generated value.

variant"default" | "line"optional

Selects the tab-list appearance. It defaults to default.

titleReactNodeoptional

A Tab label. It takes precedence over label.

labelReactNodeoptional

Alias for a Tab title when title is not supplied.

valuestringoptional

An optional stable identifier for a Tab. When omitted, one is generated from its label.

childrenReactNodeoptional

The content rendered in an individual Tab panel.