ExpandedTabs ā Animated Tab Navigation Component The ExpandedTabs component is an elegant, animated, and interactive tab switcher built using React, Framer Motion, and Tailwind CSS. It features icon-based tabs with smooth transitions, optional separators, and support for detecting clicks outside the component to deselect the active tab.
š§ Features Icon-Based Tabs with Animation Each tab is represented with a Lucide icon and a label that animates into view when the tab is selected. This keeps the UI clean and minimal while still informative.
Animated Label Reveal Uses Framer Motion to smoothly reveal tab labels (title) when selected, and collapse them when deselected.
Tab Separator Support Add visual separation between groups of tabs using the "type": "separator" syntax.
Customizable Active Color Accepts a activeColor prop to change the text color of the selected tab, making the component visually adaptable.
Click Outside to Deselect Implements a manual outside click detection logic to deselect any active tab when the user clicks elsewhere in the document.
Callback Support Triggers onChange(index) when a tab is selected or deselected (with null), allowing integration with parent components or logic.
š§© Props ts Copy Edit interface ExpandedTabsProps { tabs: TabItem[] // Array of tab objects or separators className?: string // Custom className for the root wrapper activeColor?: string // Tailwind text color class for the active tab onChange?: (index: number | null) => void // Callback when tab changes } ts Copy Edit type TabItem = { title: string icon: LucideIcon type?: never } | { type: "separator" title?: never icon?: never } š Ideal Use Cases Navigation toolbars in dashboards or settings pages
Filter/sort/group tab switchers in admin interfaces
Minimal UI environments where compact, icon-based tab navigation is preferred
š Technologies Used React ā for building component logic and managing state
Framer Motion ā for animating tab transitions
Lucide Icons ā for modern iconography
Tailwind CSS ā for responsive and utility-first styling
Custom Outside Click Logic ā for deselection without third-party libraries
import { ExpandedTabs } from "@/components/ui/expanded-tabs";
import { Home,Bell,Settings,HelpCircle, Shield, User, } from "lucide-react"
const tabs = [
{ title: "Dashboard", icon: Home },
{ title: "Notifications", icon: Bell },
{ type: "separator" as const },
{ title: "Settings", icon: Settings },
{ title: "Support", icon: HelpCircle },
{ title: "Security", icon: Shield },
]
export default function DemoOne() {
return <ExpandedTabs tabs={tabs} />;
}