Tabs
A tab component system for organizing content into switchable panels using CSS-only functionality.
Profile Settings
Manage your profile information, including your display name, avatar, and personal preferences.
Account Settings
Configure your account security, notifications, and privacy settings.
Billing Information
Manage your payment methods and billing preferences.
Current Plan
Pro Plan - $29/month
<c-tab.group group_name="basic">
<c-tabs variant="default">
<c-tab name="profile" group_name="basic" icon="user" checked="true">Profile</c-tab>
<c-tab name="account" group_name="basic" icon="settings">Account</c-tab>
<c-tab name="billing" group_name="basic" icon="credit-card">Billing</c-tab>
</c-tabs>
<c-tab.panel name="profile" group_name="basic">
<h3>Profile Settings</h3>
<p>Manage your profile information...</p>
</c-tab.panel>
<c-tab.panel name="account" group_name="basic">
<h3>Account Settings</h3>
<p>Configure your account security...</p>
</c-tab.panel>
<c-tab.panel name="billing" group_name="basic">
<h3>Billing Information</h3>
<p>Manage your payment methods...</p>
</c-tab.panel>
</c-tab.group>Component API
c-tab.group
| Property | Type | Default | Description |
|---|---|---|---|
group_name |
string |
"" |
Unique identifier for the tab group (required) |
class |
string |
- |
Additional CSS classes |
c-tabs
| Property | Type | Default | Description |
|---|---|---|---|
variant |
string |
default |
Tab style: default, segmented, pill |
size |
string |
md |
Tab size: sm, md, lg |
orientation |
string |
horizontal |
Tab orientation: horizontal, vertical |
class |
string |
- |
Additional CSS classes |
c-tab
| Property | Type | Default | Description |
|---|---|---|---|
name |
string |
"" |
Unique tab identifier (required) |
group_name |
string |
"" |
Tab group identifier (required) |
icon |
string |
- |
Icon name to display before the tab label |
c-tab.panel
| Property | Type | Default | Description |
|---|---|---|---|
name |
string |
"" |
Tab identifier to match with c-tab name (required) |
group_name |
string |
"" |
Tab group identifier (required) |
class |
string |
- |
Additional CSS classes |
Examples
Tab Variants
The tabs component supports three beautiful visual styles inspired by modern design patterns.
Default Tabs
Clean underline style with animated indicator that slides between tabs.
Overview
High-level overview of your dashboard metrics and recent activity with smooth animated transitions.
Detailed View
Comprehensive breakdown of all your data with detailed analysis and insights.
Analytics
Advanced analytics and insights into your performance metrics and trends.
Segmented Tabs
Button-like appearance with background container, perfect for compact layouts.
General Settings
Configure general application preferences and default behaviors for your account.
Security Settings
Manage your security settings, passwords, and authentication methods.
Privacy Settings
Control your privacy preferences and data sharing settings across the platform.
Pill Tabs
Rounded pill-shaped tabs with bold contrast for active states.
Monthly Sales Report
Detailed analysis of sales performance for the current month.
<!-- Default with animated underline -->
<c-tabs variant="default">...</c-tabs>
<!-- Segmented style -->
<c-tabs variant="segmented">...</c-tabs>
<!-- Pill style -->
<c-tabs variant="pill">...</c-tabs>Tab Sizes
Control the size of your tabs with the size prop.
Small Size
Small tabs are perfect for compact interfaces.
They maintain readability while saving space.
Great for sidebar navigation or mobile interfaces.
Large Size
Large tabs provide more presence and are easier to tap on touch devices.
They work well for primary navigation and important sections.
<!-- Small tabs -->
<c-tabs variant="default" size="sm">...</c-tabs>
<!-- Large tabs -->
<c-tabs variant="segmented" size="lg">...</c-tabs>Vertical Orientation
Use orientation="vertical" to create vertical tabs, perfect for sidebars and dashboard layouts.
Vertical Default
Animated side bar that moves vertically between tabs.
Dashboard Overview
Welcome to your main dashboard where you can monitor all your key metrics.
Analytics
Detailed analytics and insights about your application performance.
Settings
Configure your application settings and preferences.
Profile
Manage your personal profile information and account details.
Vertical Segmented
Vertical button-style tabs ideal for compact navigation.
Inbox (24)
Sent Messages
View all your sent messages and their status.
Draft Messages (3)
Continue working on your unsent messages.
Archived Messages
Access your archived conversations and messages.
Vertical Pills
Rounded pill-style tabs in vertical layout.
Home Feed
Your personalized home feed with latest updates and content.
Explore
Discover new content, trending topics, and recommendations.
Notifications
Stay updated with all your notifications and alerts.
Messages
View and manage your private messages and conversations.
<!-- Vertical default with animated side bar -->
<c-tabs variant="default" orientation="vertical">...</c-tabs>
<!-- Vertical segmented -->
<c-tabs variant="segmented" orientation="vertical">...</c-tabs>
<!-- Vertical pills -->
<c-tabs variant="pill" orientation="vertical">...</c-tabs>Usage Notes
Flux UI Inspired Design
Required Properties
name and group_name properties are required and must match between tabs and panels. Use checked="true" to set the initially active tab.