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 label and content; optional icon, badge, and disabled customize each tab.
  • Give items stable value identifiers. Controlled: selection/onSelectionChange; uncontrolled: defaultSelection. Avoid depending on changing item order.
  • Tab bar position is bottom by default or top.
  • 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

PropTypeRequiredDescription
itemsITabItem[]YesTab items
defaultSelectionTabValueNoInitial selected tab value for uncontrolled usage.
selectionTabValueNoControlled selected tab value.
initialIndexnumberNoLegacy uncontrolled index alias.
selectedIndexnumberNoLegacy controlled index alias.
onSelectionChange(selection: TabValue) => voidNoTab selection change handler.
tabBarPosition'top' | 'bottom'NoTab bar position. Default: 'bottom'
glassboolean | { enabled?: boolean; intensity?: number; variant?: 'regular' | 'clear' }NoLocal 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.