Tabs

LabelsCopy Anchor Link

Follow the sentence-case tab-label convention. The component preserves the authored label, including proper names and acronyms.

BehaviorCopy Anchor Link

Underline-active tabs, optional icons, and arrow-key navigation across the tablist. The strip is TabList, so these and the navigation tab rows elsewhere in an app are the same row — the look cannot drift between them.

Tabs holds the selected value itself and renders one panel at a time. Reach for TabList directly when the host owns that value (a URL-backed surface, so a tab is a shareable link) or when each tab is a route.

UsageCopy Anchor Link

import { Tabs } from '@cajon-ui/react';

<Tabs
  aria-label="Dashboard sections"
  items={[
    { value: 'overview', label: 'Overview', content: 'Overview panel' },
    { value: 'analytics', label: 'Analytics', content: 'Analytics panel' },
  ]}
/>

The panel supplies its own padding through --cajon-tabs-panel-padding — set that rather than reaching for .cajon-tabs__panel, which carries no stability contract:

<div style={{ '--cajon-tabs-panel-padding': '0' }}>
  <Tabs … />
</div>

PropsCopy Anchor Link

TabItem is a TabListItem plus content, the node rendered in the panel when that tab is selected — so icon, count, countLabel and disabled all work here too.