Tabs

Layered content with explicit selection, roving focus, and native buttons.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Workspace overview

Three projects are ready for review. Sample data.

Workspace overview

Three projects are ready for review. Sample data.

Workspace overview

Three projects are ready for review. Sample data.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add tabs

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Tabs defaultValue="overview">
  <TabsList aria-label="Project sections">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Project summary</TabsContent>
  <TabsContent value="activity">Recent changes</TabsContent>
</Tabs>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`value / defaultValue`	`string`	`first enabled direct/composed trigger`
`onValueChange`	`(value: string) => void`	`—`
`orientation`	`horizontal \| vertical`	`horizontal`
`activationMode`	`automatic \| manual`	`automatic`
`TabsTrigger.value / TabsContent.value`	`matching unique string`	`required`
`TabsTrigger.disabled`	`boolean`	`false`

Accessibility

Name TabsList. One enabled tab is in the Tab sequence. Horizontal Left/Right follows LTR/RTL, vertical Up/Down follows orientation, and Home/End move to endpoints; arrows wrap and skip disabled tabs. Automatic mode selects on focus; manual mode waits for Enter or Space. Panels keep matching generated IDs and remain mounted but hidden when inactive. Content is focusable by default; set tabIndex=-1 when its first content is already focusable. Keep values unique and stable. Rendered triggers are discovered through custom wrappers; supply defaultValue/value to choose the initial selection explicitly. onValueChange leaves controlled selection consumer-owned. Trigger/content IDs are internally owned.