Tabs

Token-driven horizontal tabs with keyboard navigation and baseline non-premium styling.

Behavior

This implementation follows the standard archive preview: underline-active tabs, optional icons, and arrow-key navigation across the tablist.

Usage

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' },
  ]}
/>

Props

Prop	Type	Default	Notes
`items`	`TabItem[]`	—	Ordered tab definitions
`defaultValue`	`string`	first enabled tab	Initially selected tab
`aria-label`	`string`	—	Accessible tablist label

Behavior

Usage

Props

On this page