Components
TabView
Switch between named content panels.
Example
Requires React 18.2+ or 19 and shared styles. See setup.
Default
Loading preview…
Code
'use client';
import { VStack, Text } from '@swiftuijs/ui';
import { TabView } from '@swiftuijs/ui';
export default function Example() {
return (<TabView items={[
{
label: 'Home',
value: 'home',
content: (<VStack spacing={20} style={{ padding: '20px' }}>
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>Home</Text>
<Text>Welcome to the home tab</Text>
</VStack>),
},
{
label: 'Search',
value: 'search',
content: (<VStack spacing={20} style={{ padding: '20px' }}>
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>Search</Text>
<Text>Search content goes here</Text>
</VStack>),
},
{
label: 'Profile',
value: 'profile',
content: (<VStack spacing={20} style={{ padding: '20px' }}>
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>Profile</Text>
<Text>Profile content goes here</Text>
</VStack>),
},
]}></TabView>);
}With Icons
Add icons to tab items:
Top Tab Bar
Place tab bar at the top:
Controlled TabView
Control tab selection programmatically:
Tab Badges
Use badges to surface counts or short status labels on a tab item:
Usage and limitations
- Provide items with
labelandcontent; optionalicon,badge, anddisabledcustomize each tab. - Give items stable
valueidentifiers. Controlled:selection/onSelectionChange; uncontrolled:defaultSelection. Avoid depending on changing item order. - Tab bar position is
bottomby default ortop. - Uses tablist/tab/tabpanel semantics. Arrow keys, Home and End move between enabled tabs; use short, descriptive labels and focused panel content.
More examples
With Icons
Top Tab Bar
Controlled TabView
Disabled Tabs
Tab Badges
API reference
| Prop | Type | Required | Description |
|---|---|---|---|
items | ITabItem[] | Yes | Tab items |
defaultSelection | TabValue | No | Initial selected tab value for uncontrolled usage. |
selection | TabValue | No | Controlled selected tab value. |
initialIndex | number | No | Legacy uncontrolled index alias. |
selectedIndex | number | No | Legacy controlled index alias. |
onSelectionChange | (selection: TabValue) => void | No | Tab selection change handler. |
tabBarPosition | 'top' | 'bottom' | No | Tab bar position. Default: 'bottom' |
glass | boolean | { enabled?: boolean; intensity?: number; variant?: 'regular' | 'clear' } | No | Local material override. Intensity is clamped to 0–1; zero uses an opaque surface. Default: Inherited from UIProvider; off without a provider |
Inherits additional props from Omit<IBaseElementComponent<'div'>, 'children'>, GlassSurfaceProps.