Tabs
Switch between related panels of content within the same view.Pills
Preview
Code
Account
Password
AccountMake changes to your account.
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Tabs } from '@advui/core'
<Tabs defaultValue="account">
<Tabs.List aria-label="Settings">
<Tabs.Trigger value="account">Account</Tabs.Trigger>
<Tabs.Trigger value="password">Password</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account">…</Tabs.Content>
<Tabs.Content value="password">…</Tabs.Content>
</Tabs>Examples
Underline with icons
Preview
Code
Profile
Notifications
Advanced
Public profile settings.
API reference
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Active tab. |
defaultValue | string | — | Starting `value` when uncontrolled. |
onValueChange | (value: string) => void | — | Called when the tab changes. |
variant | 'pills' | 'underline' | 'pills' | Visual style. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Arrow-key direction. |
activationMode | 'automatic' | 'manual' | 'automatic' | Select on focus, or on Enter/Space. |
Tabs.List
| Prop | Type | Default | Description |
|---|---|---|---|
loop | boolean | true | Wrap focus at the ends. |
Tabs.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
value required | string | — | Tab id. |
icon | ReactNode | — | Leading icon. |
disabled | boolean | — | Skip this tab. |
Tabs.Content
| Prop | Type | Default | Description |
|---|---|---|---|
value required | string | — | Matching tab id. |
Accessibility
- WAI-ARIA tabs:
tablist,tab(witharia-selected/aria-controls) andtabpanel(aria-labelledby). - Roving focus: only the active tab is in the tab order.
| Key | Action |
|---|---|
| ← → (↑ ↓ vertical) | Moves between tabs. |
| Home / End | First / last tab. |
| Tab | Moves from the tab list into the active panel. |
Responsive behavior
The list scrolls horizontally when tabs overflow on small screens.
Platform notes
Web
Keyboard navigation follows the WAI-ARIA Authoring Practices.
iOS
For app-level navigation prefer a native tab bar (expo-router Tabs).
Android
Same as iOS. With
androidRipple (on in material()), presses show the native ripple.