# Animated Staggered Dropdown

> This code implements a visually appealing and interactive dropdown component using animation libraries.  It addresses the need for a more engaging user experience compared to a standard dropdown. The component displays a list of options when a button is clicked.  The animation is achieved using the `motion` library from Framer Motion, providing a staggered, smooth opening and closing animation for each list item. The dropdown's functionality is built using React's useState hook to manage its open/closed state.  The component utilizes React Icons for its icons, offering a customizable and visually consistent experience. The `wrapperVariants`, `iconVariants`, `itemVariants`, and `actionIconVariants` objects define the animation properties for the dropdown wrapper, chevron icon, list items, and action icons respectively, controlling the timing and appearance of animations. Each option is rendered as a separate list item within a motion.ul.  Upon clicking an option, the dropdown closes, and the corresponding action could be triggered (though that logic is not included in this example; it would be added within the Option component).  The component is highly customizable via props (though not demonstrated here).  The example uses a set of predefined icons and options, but these can be easily replaced or extended.  This component can be used in various applications where a visually appealing and interactive dropdown menu is needed, such as within a settings menu, a post-management interface, or any context menu where multiple actions are available.

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

## Install

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