?

Tabs

Switchable content panels for code examples and platform-specific instructions.

componenttabs
Edit on GitHub

Overview

The Tabs component renders switchable panels, useful for showing code in multiple languages or platform-specific instructions. Supports arrow-key navigation and horizontal scrolling on narrow viewports. Maximum 6 tabs.

Props

Tabs (container)

PropTypeDefaultDescription
childrenReactNodeOne or more <Tab> elements

Tab

PropTypeDefaultDescription
labelstringTab button text
childrenReactNodePanel content

Usage

MDX source

<Tabs>
  <Tab label="npm">Content for npm tab.</Tab>
  <Tab label="pnpm">Content for pnpm tab.</Tab>
</Tabs>