Tabs

Tab switching component with a sliding indicator.

Basic Usage

import { Tabs } from '@airo-ui/react'
import { useState } from 'react'

function Demo() {
  const [activeKey, setActiveKey] = useState('1')

  return (
    <Tabs activeKey={activeKey} onChange={setActiveKey}>
      <Tabs.Pane tabKey="1" tab="Users">
        Users content
      </Tabs.Pane>
      <Tabs.Pane tabKey="2" tab="Settings">
        Settings content
      </Tabs.Pane>
      <Tabs.Pane tabKey="3" tab="Roles">
        Roles content
      </Tabs.Pane>
    </Tabs>
  )
}

Default Active Tab

Use defaultActiveKey for uncontrolled usage.

<Tabs defaultActiveKey="1">
  <Tabs.Pane tabKey="1" tab="Users">
    Users content
  </Tabs.Pane>
  <Tabs.Pane tabKey="2" tab="Settings">
    Settings content
  </Tabs.Pane>
</Tabs>

API

Tabs Props

Name	Type	Default	Description
activeKey	string	--	Controlled active tab key
defaultActiveKey	string	--	Default active tab (uncontrolled)
onChange	(key: string) => void	--	Active tab change handler
children	React.ReactNode	--	TabPane elements

TabPane Props

Name	Type	Default	Description
tabKey	string	Required	Unique identifier
tab	string	Required	Tab title text
children	React.ReactNode	--	Tab content

Interaction

• Tab indicator follows with spring elastic transition
• Content fade-in animation on switch
• Full ARIA tab roles