Free Animated React Components
Watermelon UI has 130+ free animated React components built with Motion (formerly Framer Motion) and Tailwind CSS. Each one has a live demo, the full source, and a one-line shadcn CLI install, and they are all MIT licensed.
The collection leans toward real product interactions, like a swipeable card, a dock, a continuous tab indicator, or a copy button that confirms. These are the details that make an interface feel finished.
Popular animated components
- Aave Swap Component
- Activities Card
- Adaptive Slider
- Add Cash Disclosure
- Budget Card
- Calendar Widget
- Card Cue
- Card Split Accordian
- Card Swipe
- Carousel Navigator
- Carousel Slider
- Changeable Pricing Section
- Collection Grid Disclosure
- Command Search
- Compose Email Card
- Contextual AI Bar
- Continuous Pagination
- Continuous Tabs
- Copy Confirm
- Create Community
- Create New Disclosure
- Credit Usage Card
- Deployment Card
- Dialog Stack
Browse by category
- Micro-interactions: small feedback moments for buttons, toggles, and inputs.
- Animated cards: swipeable, expandable, and stacked cards.
- Animated buttons: loading, success, and hover states.
- Animated tabs: sliding indicators and continuous tabs.
- Widgets: compact animated dashboard widgets.
- Carousels and sliders.
How to install one
Every component has a registry URL. Run npx shadcn@latest add with that URL and the files land in your components folder with dependencies installed. You can also copy the code by hand. The guide on adding animated components to React covers both paths.
Frequently asked questions
Which animation library do these components use?
Most use Motion (the library formerly called Framer Motion) with Tailwind CSS for styling. Each component page lists its exact dependencies.
Can I use them in commercial projects?
Yes. Watermelon UI is MIT licensed and free for personal and commercial use.