Tab
Tabbed navigation for organizing content into switchable panels. Supports four visual variants, vertical orientation, icons, badges, and full keyboard navigation.
Account Settings
Manage your profile, email preferences, and security options.
01 Examples
Variants
Line
Animated underline indicator tracks the active tab.
Pills
Segmented-control feel with a subtle background.
Enclosed
Classic browser-tab pattern with bordered tabs.
Solid
Bold primary fill on the active tab.
Sizes
Small
Compact for toolbars and dense UIs.
Medium
Default size for most use cases.
Large
For hero sections and spacious layouts.
Vertical Orientation
Settings
Profile
Update your display name, avatar, and bio. These details are visible to other team members.
Icons & Badges
Sarah Chen
Q4 Revenue Report
DevOps Bot
Deploy #1847 succeeded
Alex Rivera
Design review feedback
Full Width
Disabled Tabs
All disabled
All interaction is disabled.
Single tab disabled
This tab is active and interactive.
02 Micro-Interactions
Scale
Hover over the tabs to see the scale effect.
Glow
The container gets a soft glow on interaction.
03 Customization
slotClasses Override
Custom rounded triggers inside a tinted pill container.
Glassmorphism (unstyled)
data-[state=active] selector drives the active styling.Terminal (unstyled)
$ bun run build
✓ 247 modules transformed.
✓ built in 1.23s
Process exited with code 0
04 Accessibility
Built-in ARIA
Uses role="tablist" on the tab strip, role="tab" on each trigger, and role="tabpanel" on content panels. aria-selected and aria-controls / aria-labelledby link tabs to their panels.
Keyboard Navigation
Arrow Left / Arrow Right cycle through horizontal tabs. Arrow Up / Arrow Down for vertical orientation. Home / End jump to first/last tab. Tab moves focus into and out of the tab strip.
Focus Management
Only the active tab has tabindex="0". Arrow keys
move focus and activate the tab (automatic activation pattern). Focus rings use focus-visible: so they never show on mouse clicks.
Reduced Motion
The sliding indicator and Mint effects respect prefers-reduced-motion. Transitions are shortened
or removed when the user has requested less motion.
05 API Reference
No matching properties |