Changelog

• Added 4 new icon by Matthew Smith:
  • between-horizontal-end
  • between-horizontal-start
  • between-vertical-end
  • between-vertical-start

• New Base UI Menu primitive.
• Update of the Radix UI DropdownMenu primitive to fix the keyboard navigation.
• Update of the Base UI primitives for version 4 of the beta.

• New Base UI Menu component.

• Added 1 new icon by Matthew Smith:
  • arrow-up-down

• Added 5 new icons:
  • circuit-board
  • clipboard
  • clipboard-check
  • clipboard-list
  • list

• New RadialNav community component by @arhamkhnz.

• New Tilt effect primitive.

• Added 12 new icons:
  • fan
  • axis-3d
  • blend
  • signal
  • signal-high
  • signal-medium
  • signal-low
  • signal-zero
  • wifi-zero
  • scissors
  • scissors-line-dashed
  • route

• New Base UI Radio primitive.

• New Base UI Radio component.

The entire documentation design has been revised to give it a more modern look and make it more user-friendly.

• New Shine effect primitive.

• Bug fixes on the AnimateIcon component.
• Removed the onAnimateChange, onAnimateStart, and onAnimateEnd events, which added complexity and caused many bugs for very limited utility.
• Added the completeOnStop property.
• Added a new animation for all "off" icons.
• Added 15 new icons:
  • blocks
  • frame
  • plug-zap
  • radio
  • radio-tower
  • nfc
  • paperclip
  • unplug
  • ev-charger
  • link
  • sliders-horizontal
  • sliders-vertical
  • equal-not
  • circle-check-big
  • router

• New Click effect primitive.
• Update the SlidingNumber and CountingNumber primitives to add the initiallyStable prop.
• Remove the Counter primitive and component.

Radix UI:

• New AlertDialog primitive and component.

Base UI:

• New AlertDialog primitive and component.
• New Dialog primitive and component.

• For Radix UI, Base UI, and Headless UI Tabs, we have added a props mode. This allows you to adjust the animation for resizing tab content according to your needs.
• New MorphingText primitive.

We have added documentation for accessibility with Animate UI.

• Added 10 new icons:
  • check
  • check-check
  • check-line
  • circle-check
  • clapperboard
  • crop
  • lock
  • lock-keyhole
  • lock-open
  • lock-keyhole-open

• New AutoHeight effect primitive.
• Update of the Animate UI Tabs primitive.
• Update of the Base UI Tabs primitive.
• Update of the Radix UI Tabs primitive.
• Update of the Headless UI Tabs primitive.

This update has made the auto-height of tables more fluid and added the AutoHeight effect.

• Update of the AnimateIcon component, notably for the loop and loopDelay props, but also to fix some bugs and add an initialOnAnimateEnd prop.
• Added 17 new icons:
  • cloud-drizzle
  • cloud-hail
  • cloud-lightning
  • cloud-moon
  • cloud-moon-rain
  • cloud-rain
  • cloud-rain-wind
  • cloud-snow
  • cloud-sun
  • cloud-sun-rain
  • moon
  • moon-star
  • orbit
  • sun
  • sun-dim
  • sun-medium
  • sun-moon

• New Base UI Tabs primitive.

• New Base UI Tabs component based on the Tabs primitive.

• New ThemeToggler effect primitive.

• New ThemeTogglerButton button component based on the ThemeToggler effect primitive.

Animate UI is no longer in beta.

In order to make Animate UI more accessible and simpler, we are introducing a new organization. Animate UI is now divided into three parts:

• Primitives: Primary components, animated but without style.
• Components: Ready-to-use components styled with Tailwind CSS.
• Icons: Animated icons based on Lucide Icons.

All components have been reworked to be improved and optimized.

Animate UI:

• New AvatarGroup primitive.
• New CodeBlock primitive.
• New Counter primitive.
• New Cursor primitive.
• New GithubStars primitive.
• New MotionGrid primitive.
• New PinnedList primitive.
• New ScrollProgress primitive.
• New Slot primitive.
• New Spring primitive.
• New Tabs primitive.
• New Tooltip primitive.

Radix UI:

• New Accordion primitive.
• New Checkbox primitive.
• New Collapsible primitive.
• New Dialog primitive.
• New DropdownMenu primitive.
• New Files primitive.
• New HoverCard primitive.
• New Popover primitive.
• New Progress primitive.
• New RadioGroup primitive.
• New Sheet primitive.
• New Sidebar primitive.
• New Switch primitive.
• New Tabs primitive.
• New Toggle primitive.
• New ToggleGroup primitive.
• New Tooltip primitive.

Base UI:

• New Accordion primitive.
• New Checkbox primitive.
• New Collapsible primitive.
• New Files primitive.
• New Popover primitive.
• New PreviewCard primitive.
• New Progress primitive.
• New Switch primitive.
• New Toggle primitive.
• New ToggleGroup primitive.
• New Tooltip primitive.

Headless UI:

• New Checkbox primitive.
• New Dialog primitive.
• New Disclosure primitive.
• New Popover primitive.
• New Switch primitive.
• New Tabs primitive.

Buttons:

• New Button primitive.
• New FlipButton primitive.
• New LiquidButton primitive.
• New RippleButton primitive.

Texts:

• New ScrollingNumber primitive.

All other texts have been updated to be optimized and fix some bugs.

Effects:

• New Blur primitive.
• New Fade primitive.
• New Particles primitive.
• New Slide primitive.
• New Zoom primitive.

All other effects have been updated to be optimized and fix some bugs.

Animate UI:

All components have been reworked to use the new animated primitives.

Radix UI:

• New Toggle component.

All other components have been reworked to use the new animated primitives.

Base UI:

• New Files component.
• New Toggle component.

All other components have been reworked to use the new animated primitives.

Headless UI:

All components have been reworked to use the new animated primitives.

Buttons:

• New Button component.

All other components have been reworked to use the new animated primitives.

Backgrounds:

No changes to backgrounds.

Community:

The new community category contains animated components contributed by the community. Unlike other Animate UI components, they aren’t required to use our primitives, so their APIs may vary and some may offer limited configuration (few or no props).

The goal is to make it easy for anyone to publish and share animated components with the community.

Icons

The AnimateIcon wrapper has been updated to fix some bugs and add 4 new props:

• animateOnView
• animateOnViewMargin
• animateOnViewOnce
• delay

There are 24 new icons:

• accessibility
• airplay
• binary
• terminal
• badge-check
• cast
• cctv
• chart-bar
• chart-bar-increasing
• chart-bar-decreasing
• chart-column
• chart-column-increasing
• chart-column-decreasing
• chart-line
• chart-no-axes-column
• chart-no-axes-column-increasing
• chart-no-axes-column-decreasing
• chart-scatter
• chart-spline
• contrast
• cross
• ellipsis
• ellipsis-vertical
• party-popper

Now, all changes will be detailed month by month and version by version on this page for greater transparency.

We have added a roadmap page to give you more visibility into the future of Animate UI. This may evolve over time.

See the roadmap page here.

We have updated our installation method to use the new feature of CLI shadcn/ui version 3. Now, to install a component, you can use @animate-ui/[type]-[category]-[name]. For example, to install the Base UI accordion primitive, you can use @animate-ui/primitives-base-accordion.

See the getting started guide here.

We have updated the MCP page to show you how to use the MCP shadcn/ui with Animate UI.

See the MCP page here.

We have added a page to show you other animated distributions that you can use with Animate UI.

See the other animated distributions page here.