Tabs

interactive

Tabbed interface with roving tabindex, arrow-key navigation, and the ARIA tabs pattern. Supports badges and HTML content panels.

Preview

Scale1.00

PRIVATE_BETA_INSTALL_INSTRUCTIONS_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED

PRIVATE_BETA_INSTALL_INSTRUCTIONS_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED

PRIVATE_BETA_INSTALL_INSTRUCTIONS_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED

Usage

import { Tabs } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<Tabs
  aria-label="Install methods"
  items={[
    { key: 'bun', label: 'Bun', badge: 'recommended',
      content: <pre>PRIVATE_BETA_INSTALL_INSTRUCTIONS_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED</pre> },
    { key: 'npm', label: 'npm',
      content: <pre>PRIVATE_BETA_INSTALL_INSTRUCTIONS_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED</pre> },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`TabItem[]`	required	Tab definitions (key, label, content, badge?, html?)
`defaultActive`	`string`	first key	Initially active tab
`aria-label`	`string`	`'Tabs'`	Accessible label for the tablist
`class`	`string`	--	Additional CSS classes

TabItem interface

Field	Type	Description
`key`	`string`	Unique identifier
`label`	`string`	Tab button text
`badge`	`string`	Optional badge (e.g. "recommended")
`content`	`JSX.Element \| string`	Panel content
`html`	`boolean`	Treat content as raw HTML

Accessibility

ARIA: role="tablist", role="tab", role="tabpanel" with aria-selected and aria-controls.
Keyboard: Left/Right arrows move focus between tabs. Home/End jump to first/last. Enter/Space activates.
Roving tabindex: Only the active tab is in the tab order (tabindex="0"); others are tabindex="-1".
Motion: Tab switch transitions honor prefers-reduced-motion.

Do / Don't

Do

Provide an aria-label that describes the tab group's purpose.

Don't

Don't use tabs for sequential content (steps). Tabs are for parallel, independently viewable panels.