# Animated Shifting Tab Component

> This code implements a reusable React component that creates an animated tabbed interface with a shifting content overlay.  It addresses the need for a visually engaging and interactive way to present different sections of content, such as product details, pricing plans, or blog posts. The component uses several libraries to achieve this: React for the core UI, Framer Motion for animations, and React Icons for providing visual elements.   Here's a step-by-step breakdown:  1. **`ShiftingDropDown` Component:** This is the main container, holding the `Tabs` component. 2. **`Tabs` Component:**  This manages the selected tab state using `useState` hooks for `selected` (the currently selected tab index) and `dir` (direction of animation, 'l' or 'r').  The `handleSetSelected` function updates these states based on mouse events, determining the animation direction. 3. **`Tab` Component:** Each tab is rendered as a button.  The styling changes based on whether it's selected, using CSS classes and the `selected` prop.  The `FiChevronDown` icon animates on selection. 4. **`Content` Component:** This displays the content for the selected tab. `AnimatePresence` ensures smooth entrance and exit animations for the content using Framer Motion's `initial`, `animate`, and `exit` properties.  The `motion.div` smoothly animates the content's position based on the `dir` prop (left or right). 5. **`Bridge` Component:** A simple visual element that creates a bridge connecting the tab to the content. 6. **`Nub` Component:** This dynamically positioned element visually points to the selected tab.  `useEffect` and `getBoundingClientRect` are used to calculate its position relative to the selected tab. 7. **Content Components (`Products`, `Pricing`, `Blog`):** These components render the actual content for each tab, using basic HTML elements and styling. 8. **`TABS` Array:** This array defines the data for each tab, mapping titles to their corresponding content components.  Example Scenarios:  - Displaying product features, pricing tiers, or blog posts. - Creating an interactive FAQ section. - Presenting different views or options within a dashboard. - Implementing a step-by-step guide or tutorial.  The component leverages the power of React's state management and Framer Motion's animation capabilities to create a polished and user-friendly experience.  The use of CSS classes and inline styles allows for easy customization and theming.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: react-icons, framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/animated-shifting-tab-component

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/animated-shifting-tab-component?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