Expanded Tabs

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Expanded Tabs to your project and fits it to your theme.

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} />;
}