Animate UI 2.0: Animated Primitives for Radix UI, Base UI, and React Aria
Animate UI 2.0 brings Motion-powered primitives to Radix UI, Base UI, and React Aria. It preserves shadcn/ui components while adding CLI tooling and an AI motio
Image source: @animate_ui on X
Modern React development relies heavily on headless primitives like Radix UI, Base UI, and React Aria to secure accessibility and flexibility without imposing styling conventions. However, bridging functional state logic and fluid motion has traditionally required complex orchestration. The release of Animate UI 2.0 addresses this friction by introducing Motion-powered animated primitives that preserve existing shadcn/ui components while matching each library's exact API.
Unified Primitives Across Headless Ecosystems
At the core of Animate UI 2.0 is the consolidation of headless animation into a single npm package, extending support to React Aria alongside Radix UI and Base UI. Because each primitive mirrors the exact API of its respective upstream library, developers can introduce motion layers without refactoring established component signatures.
The update introduces 14 newly animated components, including Combobox, Drawer, Menubar, Select, and Toast. These primitives feature physics-based springs and interruptible animations, ensuring smooth interaction during rapid input while strictly respecting user reduced motion preferences. The package also integrates 133 new Lucide icons and Hugeicons to unify animated iconography with interface controls.
CLI Automation and AI Motion Skill
To streamline adoption, Animate UI 2.0 includes a dedicated command-line interface that animates components in a single command. The CLI enables developers to retain their tailored shadcn/ui setups while incorporating motion behaviors without tedious manual wiring.
The release also introduces an AI skill designed to animate components, icons, and interactions, as well as review motion implementation. According to the release notes, this provides automated assistance for inspecting transition curves and maintaining interaction consistency across design systems.
Ecosystem Boundaries and Caveats
Before adopting Animate UI 2.0, teams must account for clear infrastructural boundaries. First-party documentation highlights that the library is strictly intended for React ecosystems utilizing Radix UI, Base UI, or React Aria. Applications built outside these headless specifications cannot leverage these primitives directly.
Additionally, the AI skill depends on compatibility with supported AI development tools and engineering workflows. By mirroring native APIs and respecting reduced motion, the release offers a focused solution for teams building accessible, motion-rich React applications.