Animate UI 2.0.0

Animate UI is now an npm package. Instead of copying animated versions of shadcn/ui components into your project, you keep your own components and swap the primitives they're built on. Same structure, same styles, same API: only the import changes.

- import { Accordion as AccordionPrimitive } from 'radix-ui';
+ import { Accordion as AccordionPrimitive } from '@animate-ui/react/primitives/radix-ui';

One command does it for every installed component:

npm install @animate-ui/react motion
npx @animate-ui/cli@latest animate all

Highlights

• @animate-ui/react: animated primitives for Radix UI, Base UI and React Aria, each with exactly its library's API, plus transition / exitTransition props.
• @animate-ui/cli: animate swaps the primitive imports of your shadcn/ui components and removes the CSS animations Motion replaces, whatever your base and style. migrate moves a v1 project to v2. audit lists the animations of a project.
• New components: Combobox, Context Menu, Drawer, Menubar, Navigation Menu, Pagination, Questionnaire, Select, Slider and Toast, for every library that has them, plus Input OTP, Scroll Fade, Sliding Text and Swapping Text. Sidebar now comes for Base UI and React Aria too.
• AnimateUIProvider: one tempo to make every animation faster or slower, how checks animate, and how reduced motion applies.
• Motion rules everywhere: springs and short ease-out tweens, exits quicker than entrances, transforms and opacity instead of layout, interruptible animations, nothing on keyboard navigation, reduced motion respected.
• Icons: the animated Lucide icons plus 133 new ones, and Hugeicons as a second library, installed with shadcn.
• Backgrounds: Topography and Glyph join the backgrounds; the animated ones pause off screen and in hidden tabs.
• AI: the Animate UI skill (npx skills add imskyleen/animate-ui) teaches your coding assistant to animate any component the Animate UI way, and every registry file can be added through the shadcn MCP server.
• New documentation, with one page per primitive and a tab per library.

Upgrading from v1

npx @animate-ui/cli@latest migrate all

It moves every import it can to @animate-ui/react, lists the few manual steps left, and asks before deleting the v1 files nothing imports anymore. See the migration guide.

Headless UI is no longer supported, and motion 14 is now a peer dependency. The v1 documentation stays available at v1.animate-ui.com, and old v1 links redirect to their v2 page.

Thanks

Thanks to everyone who opened issues and pull requests on v1. The icons from @sayan20004, @CM-exe, @mefune and @mnove are part of v2.

Full changelog: https://animate-ui.com/docs/changelog