Tabs

Tabs

<Tabs defaultSelectedKey="overview">
  <TabList aria-label="Sections">
    <Tab id="overview">Overview</Tab>
    <Tab id="usage">Usage</Tab>
    <Tab id="api">API</Tab>
  </TabList>
  <TabPanel id="overview">…</TabPanel>
  <TabPanel id="usage">…</TabPanel>
  <TabPanel id="api">…</TabPanel>
</Tabs>

Install: @helixui/core

import { Tabs, TabList, Tab, TabPanel } from '@helixui/core'

status: stable · since: 0.1.0

Tags: sections, switch, in-page

Anatomy

[ Tab ][ Tab ][ Tab* ]
──────────────────────
  panel content

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — tab strip + panel; panel sized by content
• stackable — false
• fullBleed — false

Visual

A horizontal tab strip with an underline indicator under the active tab, followed by the active panel below. Hover/focus tabs lighten with surface tint.

Props

Name	Type	Default	Description
variant	'underline' | 'pill'	underline	Visual style. pill reads as a SegmentedControl with panels.
orientation	'horizontal' | 'vertical'	horizontal	Layout.
selectedKey	Key	—	Controlled selection.
defaultSelectedKey	Key	—	Uncontrolled initial.
onSelectionChange	(key: Key) => void	—	Change handler.

Slots

• Tabs children — TabList + TabPanels
• TabList children — Tab components
• Tab children — label
• TabPanel children — panel content; one per Tab id

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.bg.action.brand.default, color.text.primary, color.text.secondary, color.text.action.brand, color.border.default, color.border.focus, radius.md, space.1, space.2, space.3, space.4, font.family.sans, font.size.sm, font.weight.medium, shadow.sm

Accessibility

Role: tablist

Keyboard

Key	Action
ArrowLeft	Previous tab (horizontal).
ArrowRight	Next tab (horizontal).
Home	First tab.
End	Last tab.

Composes with

Component	Relation	Note
SegmentedControl	alternative	SegmentedControl for compact view-mode pickers.
Tab	child	Each tab.
TabPanel	child	Each panel.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

in-page sections

“three-tab interface for Overview/Activity/Settings”

<Tabs>
  <TabList>
    <Tab id="o">Overview</Tab>
    <Tab id="a">Activity</Tab>
    <Tab id="s">Settings</Tab>
  </TabList>
  <TabPanel id="o">…</TabPanel>
  <TabPanel id="a">…</TabPanel>
  <TabPanel id="s">…</TabPanel>
</Tabs>

Related

• SegmentedControl