Tabs
Horizontal tab navigation with content panels. Arrow key support.
Examples
Basic tabs
Three-tab panel with a bottom-border active indicator.
With icon prefix
Emoji icons prefix each tab label for visual cues.
Fitted width
Tabs stretch to fill the available container width.
Disabled tab
The Billing tab is disabled and cannot be selected.
Vertical layout
Tabs stack vertically on the left with content on the right.
Line Style
Tabs with underline indicator instead of background.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Tabs } from "@rokle/components";import { Tabs } from "@rokle/components";
export function Example() {
return (
<Tabs
tabs={[
{ value: "account", label: "Account", content: <p>Account settings here.</p> },
{ value: "password", label: "Password", content: <p>Change your password.</p> },
{ value: "notifications", label: "Notifications", content: <p>Notification preferences.</p> },
]}
/>
);
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | Tab[] | - | Array of tab definitions with value, label, and content. |
| defaultValue | string | - | Initially active tab. |