Tabs
A tabbed interface with accessible keyboard navigation. Built on Radix UI Tabs.
Account
Update your account details. Changes save when you click the button.
Installation
pnpm
pnpm dlx @hex-core/cli add tabsAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | Default active tab value (uncontrolled) |
value | string | — | Controlled active tab value |
onValueChange | function | — | Callback: (value: string) => void |
className | string | — | Additional CSS classes |
AI Guidance
When to use
Use to organize content into switchable panels: settings pages, dashboards, product details with multiple sections.
When not to use
Don't use for navigation between pages (use router/links). Don't use for steppers/wizards (use a stepper component).
Common mistakes
- Missing defaultValue causing no tab selected initially
- TabsTrigger value not matching TabsContent value
- Using for page navigation instead of in-page content switching
Accessibility
Full keyboard navigation built-in (arrow keys, Home, End). Radix handles aria-selected, role='tabpanel', etc.
Token budget: 350