Skip to content

Animate UI 2.2.0

Choose a tag to compare

View all tags
@imskyleen imskyleen released this 23 Oct 18:57
· 12 commits to main since this release
v2.2.0
1d23c12

Animate UI for Vue

Animate UI now speaks Vue. @animate-ui/vue ships Reka UI's primitives with exactly their API and Motion for Vue inside: your shadcn-vue components stay yours, only the import changes.

- import { AccordionContent } from 'reka-ui';
+ import { AccordionContent } from '@animate-ui/vue/primitives/reka-ui';

One command does it for every installed component:

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

Vue

  • @animate-ui/vue: 28 animated components on Reka UI, from Accordion, Dialog and Tooltip to Combobox, Menubar, Navigation Menu, Sidebar, Toast, Drawer and Questionnaire, moving like the React ones.
  • Animate UI's own primitives in Vue: texts, buttons, effects, Motion Grid, Pinned List, Tabs, Input OTP, Code Block, Page Transition (with vue-router and Nuxt) and more.
  • 770+ animated icons (Lucide and Hugeicons) as .vue files, and the 9 backgrounds, all added with shadcn-vue from the Vue registry.
  • The CLI animates shadcn-vue projects: animate swaps the reka-ui imports and removes the CSS animations Motion replaces, and audit reads .vue files.
  • The skill animates Vue and Nuxt projects too (npx skills add imskyleen/animate-ui).
  • The docs have a React / Vue switch, every guide page in Vue, and a Vue home page: animate-ui.com/vue.

Components

  • Menus and lists stagger their rows as they open: Dropdown Menu, Context Menu, Menubar, Select, Combobox, Navigation Menu and the Sidebar's submenus. Each row slides in from the right out of a blur, the box is there at once.
  • Select and Combobox swap their chosen text instead of changing it in one frame.
  • The Sidebar's trigger shows the animated Panel Left, Morphing Text morphs more smoothly, Sliding Text slides when its whole link or button is hovered, and animated icons take initial={false}.
  • The Motion Grid page has its editor back.

Fixes

  • Sidebar: from a sub-menu button back to its trigger, the highlight glides up as one.
  • Theme Toggler wipes across the old page on a site with a Page Transition, header included.
  • Questionnaire, Toggle Group, Collapsible, Accordion, Navigation Menu, Pagination and the Hexagon background: see the changelog.

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

Assets 2
Loading