# Animated To-Do List

> This React component implements an interactive to-do list with smooth animations for adding and removing items.  It leverages Framer Motion for its animation capabilities, creating a visually engaging user experience. The component manages a list of to-do items, each with a description, completion status, and estimated time. Users can check off tasks, delete them, and add new ones through a form.  Adding a new task smoothly animates the form's appearance, while removing a task triggers a custom exit animation that fades the item and moves it offscreen, providing visual feedback to the user.  The application uses functional components, hooks like useState and useEffect for state management and side effects, and the AnimatePresence component from Framer Motion to manage the appearance and disappearance of list items.  Each to-do item is a motion component, allowing for individual animations.  The form uses controlled components to manage input values and prevent unexpected behavior. This component is ideal for applications requiring a user-friendly and visually appealing to-do list interface. Example scenarios include personal task management, project planning, or simple to-do list applications.  The use of Framer Motion enhances user engagement by providing smooth, visually appealing transitions between states.

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

## Install

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