Tabs

Category: Navigation — Pattern: Composite

Dependency: @base-ui-components/react/tabs

Import

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@hareru/ui"

Exports

Name	Type	Description
`Tabs`	Component	Root tabs context provider; accepts `defaultValue` or `value`
`TabsList`	Component	Container for tab trigger buttons
`TabsTrigger`	Component	Individual tab button; requires `value` prop
`TabsContent`	Component	Content panel shown when corresponding trigger is active; requires `value` prop

Key Props

Prop	Type	Default	Description
`defaultValue`	`string`	—	Initial active tab (uncontrolled)
`value`	`string`	—	Controlled active tab
`onValueChange`	`(value: string) => void`	—	Callback when active tab changes

Structure

TabsList [container] (expected)
- TabsTrigger [trigger] (expected) ×N
TabsContent [content] (expected) ×N

(expected) = recommended in canonical composition, not runtime-required.

Accessibility

Roles: tablist, tab, tabpanel
Keyboard:
- Arrow keys to switch tabs
- Tab to enter panel content
Notes: ARIA tabs pattern provided by Base UI.

Usage

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@hareru/ui"

<Tabs defaultValue="general">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="security">Security</TabsTrigger>
  </TabsList>
  <TabsContent value="general">General settings</TabsContent>
  <TabsContent value="security">Security settings</TabsContent>
</Tabs>

Notes

Arrow keys move focus between tabs; Space or Enter activates the focused tab.
Each TabsTrigger and its corresponding TabsContent must share the same value string.
All inactive TabsContent panels are hidden from the DOM using hidden attribute, preserving their state.

Import

Exports

Key Props

Structure

Accessibility

Usage

Notes

On this page