Tabs
Navigation
Layout
Organize content into tabbed interfaces with keyboard navigation.
Looking for a simpler toggle? Use Segmented Control for state switches without content panels (e.g., View: List/Grid).
Default Variant
Pill-style tabs with indigo-50 background container
View your project overview, recent activity, and key metrics at a glance.
Lined Variant
Underline-style tabs with bottom border indicator
View your project overview, recent activity, and key metrics at a glance.
With Icons
Add icons to tab triggers
Form in Tabs
Complete form with save action
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | Initially active tab |
value | string | — | Controlled active tab |
onValueChange | (value: string) => void | — | Callback when tab changes |
variant | 'default' | 'lined' | 'default' | Visual style variant |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Tab orientation |
Usage
Import and implementation examples
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
// Basic usage
<Tabs defaultValue="tab1">
<TabsList>
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
<TabsTrigger value="tab3">Tab 3</TabsTrigger>
</TabsList>
<TabsContent value="tab1">
Content for tab 1
</TabsContent>
<TabsContent value="tab2">
Content for tab 2
</TabsContent>
<TabsContent value="tab3">
Content for tab 3
</TabsContent>
</Tabs>
// Lined variant
<Tabs defaultValue="tab1" variant="lined">
<TabsList>
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
</TabsList>
...
</Tabs>
// With icons
<TabsTrigger value="profile" className="gap-2">
<User className="w-4 h-4" />
Profile
</TabsTrigger>Features
Built-in functionality
- Keyboard navigation: Arrow keys to switch tabs
- Automatic activation: Tab content loads on selection
- Accessible: ARIA roles and keyboard support
- Smooth transitions: 200ms transition on state change
- Icon support: Add icons to tab triggers
- Two variants: Default (pill) and Lined (underline)
- Controlled mode: Full control over active tab
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="tablist" for tab containerrole="tab" for each triggerrole="tabpanel" for contentaria-selected for active tabKeyboard Navigation
| Key | Action |
|---|---|
| Arrow Left/Right | Navigate between tabs |
| Enter/Space | Activate tab |
| Tab | Move focus to/from tablist |
| Home/End | Jump to first/last tab |
Notes
- Focus management follows WAI-ARIA patterns
- Tab panels are hidden but accessible
- Screen readers announce tab selection