Components / Navigation
Tabs
A single-panel view switcher with horizontal or vertical orientation and manual or automatic activation.
Available in @kape/react
Interactive example
Use keyboard and pointer input to exercise the public behavior.
One coherent system across applications.
Installation and usage
Import the owned Kape primitives and the component stylesheet once.
Tabs imports
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@kape/react";
import "@kape/react/styles.css";Props
| Prop | Type | Purpose |
|---|---|---|
value / defaultValue | string | Controlled or initial tab |
orientation | horizontal | vertical | Arrow-key direction |
activationMode | automatic | manual | Focus activation behavior |
Accessibility
Semantics, focus, naming, disabled states, and announcements are preserved by the Kape wrapper and covered by component tests. Supply meaningful visible labels and descriptions.
Keyboard
- Arrow keys
- Moves focus according to orientation.
- Home / End
- Moves to the first or last tab.
- Enter / Space
- Activates in manual mode.
Composition and limitations
Compose the exported parts directly; styling implementation details and the underlying headless library are not public API.