Skip to main content

​
Overview

The Tabs component provides accessible tab navigation with keyboard arrow-key support. The active indicator slides smoothly between tabs, providing visual feedback during navigation.

​
Import

import { Tabs } from '@kivora/react';

​
Basic Usage

<Tabs 
  tabs={[
    { id: 'overview', label: 'Overview', content: <Overview /> },
    { id: 'settings', label: 'Settings', content: <Settings /> },
    { id: 'analytics', label: 'Analytics', content: <Analytics /> },
  ]} 
/>

​
Controlled State

const [activeTab, setActiveTab] = useState('overview');

<Tabs 
  tabs={[
    { id: 'overview', label: 'Overview', content: <Overview /> },
    { id: 'settings', label: 'Settings', content: <Settings /> },
  ]}
  activeTab={activeTab}
  onChange={setActiveTab}
/>

​
Default Tab

<Tabs 
  defaultTab="settings"
  tabs={[
    { id: 'overview', label: 'Overview', content: <Overview /> },
    { id: 'settings', label: 'Settings', content: <Settings /> },
  ]} 
/>

​
Disabled Tabs

<Tabs 
  tabs={[
    { id: 'overview', label: 'Overview', content: <Overview /> },
    { id: 'settings', label: 'Settings', content: <Settings />, disabled: true },
    { id: 'analytics', label: 'Analytics', content: <Analytics /> },
  ]} 
/>

​
Props

​
TabsProps

PropTypeDefaultDescription
tabsTabItem[]requiredList of tabs to render
defaultTabstringFirst tab IDInitially active tab (uncontrolled)
activeTabstringundefinedControlled active tab ID
onChange(id: string) => voidundefinedCalled with the new tab ID when selection changes
classNamestring''Additional CSS classes

​
TabItem

PropertyTypeDescription
idstringUnique identifier for this tab
labelstringText label shown in the tab trigger
contentReactNodePanel content associated with this tab
disabledbooleanPrevent selection of this tab

​
Keyboard Navigation

The Tabs component supports full keyboard navigation:
  • Arrow Right: Move to next enabled tab
  • Arrow Left: Move to previous enabled tab
  • Tab: Focus on the tab list
  • Navigation wraps around (last tab → first tab)

​
Accessibility

  • Uses proper ARIA roles: tablist, tab, and tabpanel
  • Implements aria-selected and aria-controls attributes
  • Keyboard navigation with arrow keys
  • Focus management with tabIndex
  • Disabled tabs are excluded from keyboard navigation
  • Active tab indicator is marked with aria-hidden

​
Animation

The component features a smooth sliding indicator that animates between tabs using CSS transitions. The indicator automatically adjusts its position and width based on the active tab’s dimensions.

Build docs developers (and LLMs) love

Get started for freeTalk to us