TabbedPanel
Generic tabbed container that shows one child panel at a time
TabbedPanel renders a row of tab buttons and displays the child matching the active tab. It supports both controlled and uncontrolled usage.
Live Example
Loading...
Usage
import { TabbedPanel } from '@timelinx/ui';
import type { TabDefinition } from '@timelinx/ui';
const tabs = [
{ id: 'general', label: 'General' },
{ id: 'advanced', label: 'Advanced' },
] as const satisfies readonly TabDefinition[];
<TabbedPanel tabs={tabs} activeTab={active} onTabChange={setActive}>
<div>General content</div>
<div>Advanced content</div>
</TabbedPanel>Children are matched to tabs by index - the first child corresponds to the first tab, and so on.
Props
Prop
Type
Standalone
TabbedPanel is a standalone component - no context providers needed.