Organize content into separate views. Built on Radix UI with smooth animations and full RTL support.
Preview
Make changes to your account here. Click save when you're done.
Installation
Usage
Examples
With Icons
Your profile information
Controlled
Active tab: account
Account tab content
Props
| Name | Type | Default | Description |
|---|---|---|---|
defaultValue | string | undefined | The default active tab value |
value | string | undefined | Controlled active tab value |
onValueChange | (value: string) => void | undefined | Callback when tab changes |
Accessibility
Keyboard Navigation
- Tab - Move focus to the active tab
- Arrow Keys - Navigate between tabs
- Home - Move to first tab
- End - Move to last tab
ARIA Attributes
- role="tablist" on the tabs list container
- role="tab" on each tab trigger
- role="tabpanel" on each tab content panel
- aria-selected indicates the active tab
- aria-controls links tab to its panel
RTL Considerations
Tabs automatically align and flow correctly in RTL layouts.
- Tab list layout respects text direction
- Arrow key navigation follows reading direction
- Focus indicators position correctly
- Icons in tabs mirror appropriately if needed
Use Cases
Content organization by category
Settings panels with sections
Dashboard view switchers
Multi-step form alternatives
Best Practices
Do
- ✓ Keep tab labels short and descriptive
- ✓ Show the active tab clearly with visual emphasis
- ✓ Preserve tab content state when switching
Don't
- ✗ Don't use more than 5-6 tabs — consider other navigation
- ✗ Don't use tabs for sequential steps — use Stepper
- ✗ Don't hide critical content behind secondary tabs