Awesome Tailwind CSS and Framer Motion components for your React project
Copy paste the most popular components from the web and use them in your project without having to worry about styling and animations. Built with tailwindcss and framer motion.
A cool tooltip that reveals on hover, follows mouse pointer
A custom pointer that follows mouse arrow and animates in pointer and content.
Parallax Grid Scroll
A grid where two columns scroll in oposite directions, giving a parallax effect.
Sticky Scroll Reveal
A sticky container that sticks while scrolling, text reveals on scroll
Text Generate Effect
A cool text effect that fades in text on page load, one by one.
A full width background box container that highlights on hover
A gradient pin that animates on hover, perfect for product links
A beam that follows the outline of a container.
Container Scroll Animation
A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.
A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.
A radar preview that spins and shows icons on the front.
A group of beams in the background of a container, sort of like meteors.
Squiggly underline for links and buttons.
A simple yet elegant badge for your header components.
Cards stack on top of each other after some interval. Perfect for showing testimonials.
A border that moves around the container. Perfect for making your buttons stand out.
Hover over the cards and the effect slides to the currently hovered card.
Framer Motion Switch
A cool switch component built with Framer Motion and Tailwind CSS. Toggle the switch to see animation in action.
Scroll Line Progress
A Line, an SVG element, that animates and fills as you scroll
Drag cards to scroll, click on a card to rotate it. Has perspective so its cool.
We are working hard to bring you more components. Bookmark this page to stay tuned!