Layout

Tabs

Accessible tab navigation built on Radix Tabs. Handles roving tabindex, arrow-key navigation, and ARIA roles automatically. Supports controlled (value + onValueChange) and uncontrolled (defaultValue) usage; defaults to the first tab when neither is specified.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Accessible tab navigation, built on Radix Tabs.

import { Tabs, type TabItem } from 'achery-ui'

const items: TabItem[] = [
  { value: 'overview',     label: 'Overview',     content: <Overview /> },
  { value: 'ingredients',  label: 'Ingredients',  content: <Ingredients />, disabled: false },
]

<Tabs
  items={items}
  defaultValue="overview"      // uncontrolled
  value={tab}                  // controlled
  onValueChange={setTab}
/>

Also exports TabsPrimitive (raw Radix) for custom layouts.