Tabs
A flexible tab navigation component for switching between related content panels. Supports 3 variants, 3 sizes, vertical orientation, icons, disabled states, and smooth spring-based animations.
Live Preview
Interact with the Tabs component in real time. Adjust variant, size, and orientation to see changes instantly.
1<Tabs2items={items}3variant="underline"4size="md"5orientation="horizontal"6/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Tabs component into your file.
import { Tabs } from '@/components/aidash/tabs';Usage
The simplest way to use Tabs with an array of items and content.
1const items = [2{ value: 'overview', label: 'Overview', content: <p>Overview content...</p> },3{ value: 'features', label: 'Features', content: <p>Features content...</p> },4{ value: 'changelog', label: 'Changelog', content: <p>Changelog content...</p> },5];6 7<Tabs items={items} />Variants
Three visual variants for different contexts: underline, pills, and boxed.
Underline
Pills
Boxed
1<Tabs items={items} variant="underline" />2<Tabs items={items} variant="pills" />3<Tabs items={items} variant="boxed" />underline for page-level navigation, pills for filter-style selection, and boxed for compact segmented controls.Sizes
Three sizes from small to large to fit any layout context.
Small
Medium (default)
Large
1<Tabs items={items} size="sm" />2<Tabs items={items} size="md" />3<Tabs items={items} size="lg" />Orientation
Switch between horizontal and vertical layouts for different UI patterns.
Horizontal (default)
Vertical
1<Tabs items={items} orientation="horizontal" />2<Tabs items={items} orientation="vertical" />With Icons
Enhance tab labels with icons for improved visual recognition.
Underline with Icons
Pills with Icons
Boxed with Icons
1const items = [2{ value: 'home', label: 'Home', icon: <HomeIcon />, content: <p>...</p> },3{ value: 'profile', label: 'Profile', icon: <UserIcon />, content: <p>...</p> },4{ value: 'settings', label: 'Settings', icon: <SettingsIcon />, content: <p>...</p> },5{ value: 'notifications', label: 'Notifications', icon: <BellIcon />, content: <p>...</p> },6];7 8<Tabs items={items} />Disabled State
Disable individual tabs to prevent user selection while keeping them visible.
Underline with Disabled Tabs
Pills with Disabled Tabs
1const items = [2{ value: 'general', label: 'General', content: <p>...</p> },3{ value: 'security', label: 'Security', icon: <LockIcon />, content: <p>...</p> },4{ value: 'billing', label: 'Billing', disabled: true },5{ value: 'admin', label: 'Admin', disabled: true },6];7 8<Tabs items={items} />Controlled Mode
Use the value and onChange props to control the active tab externally.
1const [activeTab, setActiveTab] = useState('profile');2 3<Tabs4items={items}5value={activeTab}6onChange={setActiveTab}7/>8 9{/* External controls */}10<button onClick={() => setActiveTab('profile')}>Go to Profile</button>11<button onClick={() => setActiveTab('account')}>Go to Account</button>Accessibility
Built-in accessibility features following WAI-ARIA Tabs pattern.
ARIA Roles
Uses role="tablist", role="tab", and role="tabpanel" with proper aria-selected, aria-controls, and aria-labelledby relationships.
Keyboard Navigation
Active tab receives tabIndex=0 while inactive tabs use tabIndex=-1, following the roving tabindex pattern for efficient keyboard navigation.
Orientation Support
The aria-orientation attribute is set automatically based on the orientation prop, so assistive technologies can adapt their navigation behavior.
Disabled State
Disabled tabs are marked with aria-disabled and are visually dimmed with reduced opacity. They cannot be activated via click.
1<div>2<div role="tablist" aria-orientation="horizontal">3 <button role="tab" aria-selected="true" tabIndex={0}4 aria-controls="panel-overview" id="tab-overview">5 Overview6 </button>7 <button role="tab" aria-selected="false" tabIndex={-1}8 aria-controls="panel-features" id="tab-features">9 Features10 </button>11</div>12<div role="tabpanel" id="panel-overview"13 aria-labelledby="tab-overview">14 ...content15</div>16</div>API Reference
Complete list of props accepted by Tabs and TabItem.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TabItem[] | — | Array of tab items to render |
| variant | 'underline' | 'pills' | 'boxed' | 'underline' | Visual style of the tab list |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the tab buttons |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction of the tab list |
| defaultValue | string | — | Initial active tab (uncontrolled) |
| value | string | — | Active tab value (controlled) |
| onChange | (value: string) => void | — | Callback when active tab changes |
| className | string | '' | Additional CSS classes |
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Unique identifier for the tab |
| label | string | — | Display text for the tab button |
| icon | ReactNode | — | Icon rendered before the label |
| disabled | boolean | false | Disable the tab from being selected |
| content | ReactNode | — | Content rendered in the tab panel |
value is provided, the component operates in controlled mode. You must handle state updates via the onChange callback. Without value, the component manages its own state internally using defaultValue.Related
Other components that work well alongside Tabs.