Tabs

Tab navigation with panels. Compound component: Tabs, List, Tab, Panel. Three variants.

Preview

Usage

import { Tabs } from '@ramtt/ui'

<Tabs value={tab} onChange={setTab}>
  <Tabs.List>
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Tab value="details">Details</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview">Overview content</Tabs.Panel>
  <Tabs.Panel value="details">Details content</Tabs.Panel>
</Tabs>

Props

Prop	Type	Default	Description
value*	`string`	—	Active tab value
onChange*	`(value: string) => void`	—	Tab change handler
variant	`'underline' \| 'pill' \| 'default'`	'underline'	Visual variant
children*	`ReactNode`	—	Tabs.List + Tabs.Panel elements