ElyriTabs
Tabs with controlled and uncontrolled modes, arrow-key navigation and the WAI-ARIA tabs pattern.
Installation
Add component
pnpm dlx @elyri/cli@latest add tabsExamples
Segmented
The pill style; an animated indicator carries the selected tab.
Tabs keep every panel mounted and only hide the inactive ones.
Recent activity shows up here.
Preferences live in this panel.
import { Tabs } from './components/elyri/Tabs';
export function Example() {
return (
<Tabs defaultValue="overview" variant="segmented" className="demo-ui-tabs">
<Tabs.List>
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
</Tabs.List>
<Tabs.Panel value="overview">Tabs keep every panel mounted and only hide the inactive ones.</Tabs.Panel>
<Tabs.Panel value="activity">Recent activity shows up here.</Tabs.Panel>
<Tabs.Panel value="settings">Preferences live in this panel.</Tabs.Panel>
</Tabs>
);
}Underline
Text with an underline that highlights the selected tab.
Tabs keep every panel mounted and only hide the inactive ones.
Recent activity shows up here.
Preferences live in this panel.
import { Tabs } from './components/elyri/Tabs';
export function Example() {
return (
<Tabs defaultValue="overview" variant="underline" className="demo-ui-tabs">
<Tabs.List>
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
</Tabs.List>
<Tabs.Panel value="overview">Tabs keep every panel mounted and only hide the inactive ones.</Tabs.Panel>
<Tabs.Panel value="activity">Recent activity shows up here.</Tabs.Panel>
<Tabs.Panel value="settings">Preferences live in this panel.</Tabs.Panel>
</Tabs>
);
}Vertical
A vertical layout, handy for side navigation.
Tabs keep every panel mounted and only hide the inactive ones.
Recent activity shows up here.
Preferences live in this panel.
import { Tabs } from './components/elyri/Tabs';
export function Example() {
return (
<Tabs defaultValue="overview" orientation="vertical" className="demo-ui-tabs">
<Tabs.List>
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
</Tabs.List>
<Tabs.Panel value="overview">Tabs keep every panel mounted and only hide the inactive ones.</Tabs.Panel>
<Tabs.Panel value="activity">Recent activity shows up here.</Tabs.Panel>
<Tabs.Panel value="settings">Preferences live in this panel.</Tabs.Panel>
</Tabs>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled selected value |
defaultValue | string | — | Initial value when uncontrolled |
onValueChange | (value: string) => void | — | Called on every change, controlled or not |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction: horizontal / vertical |
variant | 'segmented' | 'underline' | 'segmented' | Appearance: segmented (pill) or underline (text with an underline); the indicator animates |
Tabs.List | HTMLAttributes<HTMLDivElement> | — | The tab strip that handles arrow-key navigation |
Tabs.Trigger | { value: string } & ButtonHTMLAttributes | — | A single tab; its value maps to a panel |
Tabs.Panel | { value: string } & HTMLAttributes | — | Panel kept in the DOM, only the inactive ones are hidden |
...rest | HTMLAttributes | — | Remaining props are forwarded to the native div |