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