Tabs
Related panels with keyboard-friendly navigation.
Preview
Your project at a glance.
Billing is not available yet.
Usage
import { Tabs } from '@fwenthehunter/friendly-ui/client';
<Tabs label="Project" defaultValue="overview" items={[
{ value: 'overview', label: 'Overview', content: <p>Your project.</p> },
{ value: 'settings', label: 'Settings', content: <p>Preferences.</p> },
]} />Use unique item values and an accessible label for the tab list. Arrow keys move focus and select the next enabled tab; Home and End jump to the edges. Disabled items are skipped. Horizontal navigation respects text direction; vertical tabs use Up and Down.
Inactive panels stay mounted and hidden, preserving form state. Items can contain server-rendered content when passed from a Server Component. Use value and onValueChange in a client wrapper for controlled tabs.
Props
Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.
| Prop | Type | Default |
|---|---|---|
items | { value, label, content, disabled? }[] | required |
label | string (accessible tab-list name) | required |
defaultValue / value | string | first enabled item |
onValueChange | (value: string) => void | — |
orientation | horizontal | vertical | horizontal |