# 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

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/expanded-tabs

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/expanded-tabs?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt