Tabs

Horizontal tab navigation with full keyboard support (arrow keys, Home, End).

Controlled

import { useState } from 'react'
import { Tabs } from '@canarist/ui'

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'alerts', label: 'Alerts' },
  { id: 'settings', label: 'Settings' },
]

function Example() {
  const [active, setActive] = useState('overview')
  return <Tabs tabs={tabs} activeTab={active} onChange={setActive} />
}

Reference

Prop	Type	Default	Description
tabs	{ id: string; label: string }[]	—	Array of tab definitions.
activeTab	string	—	ID of the currently active tab.
onChange	(id: string) => void	—	Called when the user selects a tab.
className	string	—	Additional CSS classes on the tablist container.