Tabs
A Tabs component is a UI element that allows users to switch between different views or sections of content within the same interface. Organized as a series of labeled tabs, this component enhances navigation by displaying only one section at a time, helping to reduce clutter and improve user experience. Users can easily access various related content or features by clicking on the respective tabs, making it ideal for dashboards, settings pages, or any multi-section layout.
# Demo
Basic Tabs
Simple tabs for organizing content into different sections with clean navigation.
Recent Posts
Getting Started with React
Learn the basics of React development...
2 hours ago•5 min read
Advanced TypeScript Tips
Improve your TypeScript skills with these tips...
1 day ago•8 min read
Full Width Tabs
Tabs that span the full width of their container for better visual balance.
Total Revenue
$45,231
+20.1% from last month
Active Users
2,350
+180 new users
Conversion Rate
3.2%
+0.5% improvement
Settings Panel Tabs
Comprehensive settings interface with multiple configuration sections.
General Settings
Device Preview Tabs
Preview content across different device types with responsive design considerations.
Mobile View
Mobile-Optimized Content
Content designed for mobile screens
Touch-Friendly Interface
Larger buttons and touch targets
Tabs Best Practices
✅ Do's
- • Use clear, descriptive tab labels
- • Keep tab content related and logical
- • Provide visual feedback for active tabs
- • Use consistent tab styling throughout
- • Consider keyboard navigation support
- • Group related functionality together
- • Use icons to enhance understanding
- • Make tabs accessible with proper ARIA labels
❌ Don'ts
- • Don't use too many tabs (max 5-7)
- • Don't use tabs for sequential processes
- • Don't make tab labels too long
- • Don't nest tabs within tabs
- • Don't use tabs for single pieces of content
- • Don't forget to handle loading states
- • Don't ignore mobile responsiveness
- • Don't use tabs for navigation between pages
Tab State Summary
Current Tab States
Active Tabs
Basic Tabs:POSTS
Navigation:Overview
Settings:General
Device Preview:Mobile
Tab Statistics
Total Tab Sections:4
Total Tab Items:15
Tab Changes:0
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| isFull | boolean | Optional | Whether tabs should take full width. |
| items | string[] | Required | Array of tab items. |
| children | React.ReactNode | Required | Tab content. |
| selected | string | Required | Currently selected tab. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| itemClassName | string | ' ' | You can customise by passing tailwind classes. |
| activeItemClassName | string | ' ' | You can customise by passing tailwind classes. |
| onChange | (selected: string) => void | Required | Callback when tab changes. |
| ariaLabel | string | Optional | ARIA label for accessibility. |
| id | string | Optional | ID for the tabs. |
# Tags