Components
Explore our collection of beautifully animated React components built with TailwindCSS and Framer Motion. Each component is designed to enhance your user interface with smooth, engaging animations.
Job Listing Component
reactmotion
Job listing component with animation when showing more information
Supabase
I/UX Designer / $85,000 - $95,000
San Francisco, CA | Full-time
Resend
UI Developer / $75,000 - $85,000
Remote | Contract
Turso
Graphic Designer / $60,000 - $70,000
Hybrid / New York, NY | Part-time
motion usehooks-ts
View ComponentImage Metadata Preview
reactmotion
Component that displays the metadata information of an image, uses useMeasure to get the size of the information box and move the image on the Y axis
motion lucide-react react-use-measure
View ComponentAnimated Tags
reacttailwindcss
Component that displays tags with an animation when they are added or removed from the list of selected tags
Selected Tags
react
tailwindcss
javascript
typescript
nextjs
motion lucide-react
View ComponentInteractive Image Selector
reacttailwindcss
Select images by clicking on them, delete selected images using the trash icon, and reset the gallery with the refresh button. Inspired by the smooth and intuitive photo gallery experience of iPhones, this interface features seamless animations for an engaging user experience.
Demo Gallery
motion lucide-react
View ComponentApp Download Stack
reacttailwindcss
Inspired by Family.co and the example by Jenson Wong, this component presents a stack of apps, allowing users to open the stack, select the apps they want, and download them.
motion lucide-react
View ComponentPower Off Slide
reacttailwindcss
Inspired by the power off animation of iPhones, this component allows the user to slide to power off the device.
Slide to power off
motion lucide-react
View ComponentLooking for more?
Check out our basic components and text components for more UI elements.