Tabs v0.1.0 Navigation

WAI-ARIA tabs with roving focus and automatic activation.

import { Tabs } from "latticeui-react";

Examples

Basic

Roving focus with arrow keys; selection follows focus automatically.

Manage your account details and preferences.

Show code

<Tabs.Root defaultValue="account">
  <Tabs.List>
    <Tabs.Trigger value="account">Account</Tabs.Trigger>
    <Tabs.Trigger value="security">Security</Tabs.Trigger>
    <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="account">Manage your account.</Tabs.Content>
  <Tabs.Content value="security">2FA and sessions.</Tabs.Content>
  <Tabs.Content value="billing">Invoices and usage.</Tabs.Content>
</Tabs.Root>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="tabs"][data-part="root"]`
`list`	`div[role=tablist]`	`[data-scope="tabs"][data-part="list"]`
`trigger`	`button[role=tab]`	`[data-scope="tabs"][data-part="trigger"]`
`content`	`div[role=tabpanel]`	`[data-scope="tabs"][data-part="content"]`

Props

Prop	Type	Default
`Root.defaultValue` *	`string`	—
`Root.value / onValueChange`	`controlled mode`	—
`Root.orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`Trigger.value / Content.value` *	`string`	—

Accessibility

Roles: tablisttabtabpanel

Key	Action
`ArrowLeft/ArrowRight`	moves and activates (horizontal)
`Home/End`	first/last tab

Inactive panels are unmounted, not just hidden.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="tabs"][data-part="trigger"] {
  /* your overrides */
}

State attributes: data-state=active|inactivedata-orientation