Tabs

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

OverviewActivityBillingSettings

Overview panel. Use the arrow keys to move between tabs.

Activity panel.

Settings panel.

<Tabs defaultValue="overview">
  <Tabs.List aria-label="Project">
    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
    <Tabs.Trigger value="billing" disabled>Billing</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Panel value="overview">…</Tabs.Panel>
  <Tabs.Panel value="activity">…</Tabs.Panel>
</Tabs>

Tab height comes from the shared size scale. Pass either value (controlled) or defaultValue (uncontrolled); the types require one of them.

Keyboard

Key	Action
Tab	moves to the selected tab, then into the panel
← →	selects the previous or next tab, skipping disabled ones
Home End	selects the first or last tab

Part styles

Theme the list and trigger through component parts. Their elements expose data-part="list" and "trigger"; trigger styles preserve the selected underline.

Props

Tabs

Plus value (controlled) or defaultValue (uncontrolled).

Prop	Type	Default	Description
color	Colorconfig	config.defaults.color	Color of the selected tab's indicator, from the colors config.
onValueChange	(value: string) => void		Called with the newly selected tab's value.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Tab height and font size, from the sizes config.

Tabs.Trigger

Prop	Type	Default	Description
value required	string		Identifies the tab; matches a Tabs.Panel's value.

Tabs.Panel

Prop	Type	Default	Description
value required	string		Matches the value of the Tabs.Trigger that shows this panel.