Tabs
Tab navigation with animated indicator. Sizes match Button and Input (h-8 default).
Basic Tabs
Default size (h-8) with smooth animated indicator using framer-motion.
Account Settings
Manage your account settings and preferences here.
Size Variants
Override sizes via className when needed. Default is compact (h-8).
Small (h-7)
Default (h-8)
Large (h-10)
Tabs with Icons
Enhanced visual communication with icon-labeled tabs.
Profile Information
Your public profile information visible to other users.
John Doe
john.doe@example.com
Settings Panel
A practical settings panel with larger tabs for emphasis.
General Settings
Configure your basic application preferences.
Language
Select your preferred language
Timezone
Your local timezone
Disabled Tabs
Tabs can be disabled when content is not available.
This tab is active and accessible. The locked tab is disabled.
Inverted Canvas
On tray backgrounds, the active indicator uses tray color (inverted).
Dashboard Overview
When the canvas is tinted, active indicator uses tray color.