Tabs
A set of layered sections with smooth animations and hover effects powered by Framer Motion.
Animated Indicator
The active indicator smoothly animates between tabs using Framer Motion's layoutId.
Account Settings
Manage your account information and preferences. Update your profile details, email address, and connected social accounts.
With Icons & Hover Effects
Hover over inactive tabs to see the subtle background highlight effect.
Your Profile
Public information visible to others
Customize your public profile with a photo, bio, and social links.
Full Width with Slide Animation
Dashboard Overview
Get a quick snapshot of your key metrics and recent activity.
2,543
Total Users
$12,450
Revenue
+23%
Growth
Vertical Layout
General Settings
Configure your basic application settings including language, timezone, and display preferences.
Disabled State
This is an active tab. The Premium tab is disabled and requires an upgrade. Notice how the hover effect doesn't apply to disabled tabs.