Components
Tabs
A fully customizable, accessible tabs component supporting horizontal and vertical layouts with icons, tooltips, and badges.
Content for Tab 1
Installation
The Tabs component allows you to organize content into multiple views, enabling seamless navigation and responsive layouts.
Quickly add the component using:
File Structure
tabs.tsx
Props
The Tabs component comes with the following props for customization:
| Prop | Type | Default |
|---|---|---|
Tabs | React.ComponentProps<typeof TabsPrimitive.Root> | - |
TabsList | React.ComponentProps<typeof TabsPrimitive.List> | - |
TabsTrigger | React.ComponentProps<typeof TabsPrimitive.Trigger> | - |
TabsContent | React.ComponentProps<typeof TabsPrimitive.Content> | - |
Features
The Tabs component includes the following features:
- Orientation Options:
- Supports both horizontal and vertical layouts.
- Customizable Triggers:
- Add icons, tooltips, or badges for advanced UX.
- Responsive Design:
- Fully responsive, fitting into any container size.
- Keyboard Navigation:
- Navigate tabs using the keyboard for better accessibility.
Accessibility
The Tabs component is built with accessibility in mind:
- ARIA Roles:
- Uses
tablist,tab, andtabpanelroles for assistive technologies.
- Uses
- Keyboard Navigation:
- Supports
ArrowLeft,ArrowRight,Home,End, andEnterkeys.
- Supports
- Focus Management:
- Automatically focuses the active tab for improved usability.
Conclusion
The Tabs component is a robust, feature-rich tool for organizing content in a flexible and accessible manner. Its customizable design and seamless navigation make it ideal for modern web applications.