Components · Navigation
Tabs
StableSince v0.0.1
Layered content panels switched by tab triggers. Built on Radix UI Tabs.
import { Tabs } from '@nexub/react';Usage
Use it for
Switching between related views within the same page context
Organising content that belongs to the same entity
Reducing visual clutter by hiding secondary content behind tabs
Horizontal navigation within a bounded section
Use something else for
Global site navigation — use the sidebar or top nav
Sequential steps in order — use StepIndicator
Comparing content side-by-side — keep both views visible
More than 5–7 tabs — consider a Select or sub-navigation
Examples
Default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | — | Initially active tab value (uncontrolled). |
| value | string | — | Controlled active tab value. |
| onValueChange | (value: string) => void | — | Callback when active tab changes. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction of the tab list. |
On iOS & Android
Web only
Tabs has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.