@animate-ui
A fully animated, open-source React component distribution. Browse a list of animated primitives, components and icons you can install and use in your projects.
Add to components.json
In catalog"registries": {
"@animate-ui": "https://animate-ui.com/r/{name}.json"
}Then npx shadcn@latest add @animate-ui/<item> — every tile below copies its own command.
580 items · 21 run live as they reach the viewport
A background component featuring an interactive hexagon grid.
A fun notification list with animated stacking and cards that expand as you interact.
An effect that allows you to zoom in on an image on hover.
An interactive background featuring smoothly animated gradient bubbles, creating a playful, dynamic, and visually engaging backdrop.
A background component featuring an animated hole grid.
A playful list for pinning and unpinning items, with smooth animated transitions as items move between groups.
A slot component that allows you to use motion components with any element.
An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous).
A background component that displays a fireworks animation.
An interactive background featuring animated dots of varying sizes and speeds, simulating a dynamic and immersive starry space effect.
A circular intro animation component that arranges elements in a radial layout, smoothly transitioning them into orbit with looping motion.
An effect that creates animated effects at the click position, adding interactive feedback to user actions.
An effect that allows you to toggle the theme gradually.
A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth.
A 3D animated card component that flips to reveal content on the back.
A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions.
A highlight effect that allows you to highlight elements on hover, click or with a controlled value.