1. Documentation
  3. Components
  5. Tabs
ReadmeGitHub
  • Introduction
  • Quickstart
  • Text
  • Code
  • Lists
  • Tables
  • Accordion
  • Badge
  • Button
  • Callout
  • Code Block
  • Code Block Group
  • Code Snippet
  • Columns
  • Custom components
  • GitHub
  • Hover Card
  • Mermaid
  • Properties
  • Related Topics
  • Tabs
  • Tree
  • Images
  • Video
  • Files
  • Grain
  • Shade
  • Moss
  • Configuration
  • Content
  • Navigation
  • Site Identity
  • Appearance
  • Header and Footer
  • Fonts
  • Icons
  • Integrations
  • Search
  • OpenAPI
  • AI Chat
  • React Router
  • Astro
  • Next.js
  • Cloudflare
  • Vercel
  • robots.txt
  • sitemap.xml
  • JSON-LD
  • rss.xml
  • llms.txt
  • llms-full.txt
  • .md endpoints

Tabs

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

Loading documentation…

Related Topics< PreviousTreeNext >

Powered by heyo

On this page

Give every panel a clear labelCompare publishing targetsProperties
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.