CatalystTabsv1.0.9Ready for Production
Tab navigation for organizing related content into distinct views with accessible keyboard navigation and state management. Built on Radix UI Tabs.
Prefer AI-assisted development?
Catalyst Tabs extends Radix UI's Tabs primitive with a dual className/classNameInner pattern for layered customization and design token integration — giving you accessible, keyboard-navigable tab navigation with zero configuration.
Installation
npm install @pmi/catalyst-tabsimport { TabsRoot, TabsList, TabsTrigger, TabsContent } from '@pmi/catalyst-tabs';Variants
Disabled
Disable individual tab triggers to prevent interaction during loading or restricted access states.
API Reference
TabsRoot
The root container that manages active tab state. TabsTrigger and TabsContent must be descendants of TabsRoot.
Prop
Type
TabsList
Container for tab triggers. Handles roving tabindex and arrow-key focus management automatically.
Prop
Type
TabsTrigger
Individual tab button. Accepts two className props for layered styling:
className— outer container: border, layout, active-state indicatorclassNameInner— inner wrapper: text color, hover background, focus ring
Prop
Type
TabsContent
Content panel shown when its associated trigger is active. Hidden panels are removed from the accessibility tree.
Prop
Type
Accessibility
Catalyst Tabs meets WCAG 2.2 AA standards by delegating all ARIA management to Radix UI.
Keyboard Interactions
| Key | Action |
|---|---|
Tab | Move focus into the tablist (lands on the active trigger); Tab again moves focus to the active tabpanel |
Shift + Tab | Move focus in reverse through the tab sequence |
Arrow Left / Arrow Right | Move focus between tab triggers (horizontal orientation); activates immediately in automatic mode |
Arrow Up / Arrow Down | Move focus between tab triggers (vertical orientation); activates immediately in automatic mode |
Home | Move focus to the first tab trigger |
End | Move focus to the last tab trigger |
Enter / Space | Activate the focused tab trigger (required in manual mode; redundant in automatic mode) |
Activation modes:
automatic(default) — arrow keys move focus and activate the tab immediatelymanual— arrow keys only move focus;Enter/Spaceis required to activate the focused tab
ARIA
Radix UI manages all required attributes automatically:
TabsListreceivesrole="tablist"andaria-orientation. When multiple tab groups exist on a page or the tablist purpose is not clear from surrounding context, passaria-labeltoTabsListto provide an accessible name.TabsTriggerreceivesrole="tab",aria-selected,aria-controls, andaria-disabled. Triggers derive their accessible name from their visible text content.TabsContentreceivesrole="tabpanel",aria-labelledby, andtabindex="0"(making the active panel keyboard-focusable so Tab from the active trigger moves focus directly into the panel); inactive panels are hidden from the accessibility tree.
Choosing the Right Component
| Use case | Component |
|---|---|
| Content sections that expand/collapse vertically | Accordion |
| Multi-step workflow with sequential progression | Progress Stepper |
| Page-level navigation linking to different routes | Navigation Menu |