Animate UI

Overview

Animate UI provides animated, drop-in primitives for Radix UI, Base UI and React Aria, built with Motion. The idea is to swap the primitive import (for example from radix-ui to @animate-ui/react/primitives/radix-ui) and keep existing shadcn/ui components, styles and APIs, which then animate while keeping their library's accessibility. Its CLI can animate every installed shadcn/ui component in one command.

Beyond primitives, the registry ships 790 items, most of them animated icons (392 Lucide and 381 Hugeicons), plus animated backgrounds, buttons, a code block and page transitions. It is built by Skyleen, part of the Vercel OSS program, and licensed MIT with the Commons Clause: free to use in any product, but the components themselves cannot be sold or redistributed.

Features

• Drop-in primitives: Animated versions of Radix UI, Base UI and React Aria primitives behind the same API.
• One-command animation: npx @animate-ui/cli@latest animate all upgrades installed shadcn/ui components.
• Animated icons: Hundreds of Lucide and Hugeicons icons with hover, tap, in-view and loop animations.
• Backgrounds: Bubble, fireworks, glyph, gradient, gravity stars, hexagon, hole, stars and topography.
• Buttons: Flip, liquid, GitHub stars and theme toggler buttons.
• Page transitions: Variants for React Router and TanStack Router.
• Agent skill and audit: An agent skill (npx skills add imskyleen/animate-ui) and a CLI audit for reviewing animations.

Tech stack

• React, TypeScript
• Motion
• Tailwind CSS
• Radix UI, Base UI, React Aria

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @animate-ui/component-name