Tabs
Tab navigation components for organizing content.
Documentation
Use data-tabs on container, data-tab="id" on buttons, and data-tab-content="id" on content panels.
- - Tab buttons and content are linked by matching IDs
- - First tab is active by default
- - Includes fade-in transition animation
Basic Tabs
This is the content for the Overview tab. It provides a general introduction to the product or service.
Features tab content: Explore all the amazing features that make our product stand out from the competition.
Pricing tab content: Choose the plan that best fits your needs. We offer flexible pricing for teams of all sizes.
FAQ tab content: Find answers to commonly asked questions about our product and services.
Pill Tabs
Showing all items in the list.
Showing only active items.
Showing completed items.
Showing archived items.
Bordered Tabs
Profile settings and information.
General application settings.
Notification preferences and alerts.
Security settings and two-factor authentication.
Tabs with Icons
Welcome to the home dashboard.
Manage your profile information.
View and send messages.
Configure your settings.
Vertical Tabs
General Settings
Configure your general account settings and preferences.
Security Settings
Manage passwords, 2FA, and security options.
Notification Settings
Choose what notifications you want to receive.
Billing Settings
Manage your subscription and payment methods.
Integrations
Connect with third-party services and apps.
Full Width Tabs
Showing daily statistics and data.
Showing weekly statistics and data.
Showing monthly statistics and data.
Showing yearly statistics and data.