Tabs

Tab navigation for switching between content panels. Built on Radix UI Tabs.

Import

import { Tabs } from '@kikumi3n/ui';

Usage

<Tabs
  items={[
    { key: 'overview', label: 'Overview', content: <p>Overview content</p> },
    { key: 'settings', label: 'Settings', content: <p>Settings content</p> },
    { key: 'billing', label: 'Billing', content: <p>Billing content</p> },
  ]}
/>

Controlled

const [tab, setTab] = useState('overview');
<Tabs items={items} activeKey={tab} onChange={setTab} />

API

Prop	Type	Default	Description
items	TabItem[]	required	Tab items
activeKey	string	—	Controlled active tab
onChange	(key: string) => void	—	Tab change handler

TabItem

Prop	Type	Description
key	string	Unique tab key
label	ReactNode	Tab label
content	ReactNode	Tab content
disabled	boolean	Disable tab