Tabs
A tabs component for organizing content into multiple panels with tab navigation
Installation
Terminal
Import
Component.tsx
Basic
Basic tabs component with text labels.
Features:
- Controlled component requiring `value` and `onChange` props
- Use `<Tabs.Item>` for each tab item
- Keyboard navigation with arrow keys
- ARIA attributes for accessibility
Default Value
Tabs with default selected value.
Features:
- Set default value through initial state
- No separate `defaultValue` prop (controlled component)
- The selected tab is highlighted on mount
Disabled
Tabs with disabled state.
Features:
- Individual tabs can be disabled
- Entire tab group can be disabled
- Disabled tabs cannot be selected
- Visual feedback for disabled state
Icon Tabs
Icon-only tabs for compact interfaces.
Features:
- Icons as tab content
- Requires `aria-label` for accessibility
- Ideal for theme switchers or view toggles
- Maintains full keyboard navigation
Mixed Tabs
Tabs with both icons and text labels.
Features:
- Combine icons with descriptive text
- Better clarity than icon-only tabs
- Use flexbox for alignment
- Suitable for main navigation
Variants
Visual variants of the tabs component.
Variants:
- **default**: Follows the page theme dynamically (light/dark mode)
- **light**: Fixed light appearance regardless of theme
- **dark**: Fixed dark appearance regardless of theme
- **reset**: Removes variant styling, no variant settings applied
Each variant maintains full functionality while adapting visual style.
API reference
| TabsProps | Type | Default |
|---|---|---|
as | ElementType<any, keyof IntrinsicElements> |undefined | - |
className | string |undefined | - |
disabled | boolean |undefined | - |
onChange | ((value: string) => void) |undefined | - |
readOnly | boolean |undefined | - |
value | string | - |
variant | undefined |"default" |"light" |"dark" |"accent" |"reset" | - |
| TabItemProps | Type | Default |
value | string | - |
as | ElementType<any, keyof IntrinsicElements> |undefined | - |
disabled | boolean |undefined | - |
ref | ((instance: HTMLElement |null) => void) |RefObject<HTMLElement> |null |undefined | - |