@animate-ui/react

@animate-ui/react ships every primitive of Radix UI, Base UI and React Aria with exactly its library's API and Motion inside. Swap the import and your components animate: parts, props, data attributes and accessibility stay the library's.

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

It uses the primitive library your components already depend on. The other packages are optional peer dependencies: install only what you use.

UsageCopy Anchor Link

Change the import source, nothing else:

import { Dialog } from 'radix-ui'; 
import { Dialog } from '@animate-ui/react/primitives/radix-ui'; 

The imports mirror the library's:

Preview Link Card isn't in the umbrella imports: it only comes from its own path, @animate-ui/react/primitives/<library>/preview-link-card.

The umbrella imports re-export everything else from the library (Slot, Label, Field…), so an import mixing animated and plain parts keeps working. In a shadcn/ui project, the CLI makes the change for you.

Entry pointsCopy Anchor Link

Every entry point is its own module: you only ship what you import.

CustomizationCopy Anchor Link

Pace and checksCopy Anchor Link

AnimateUIProvider is optional. Without it, the defaults apply.

import { AnimateUIProvider } from '@animate-ui/react/provider';

<AnimateUIProvider tempo={1.2} checkAnimation="pop">
  {children}
</AnimateUIProvider>;

Providers can be nested: the closest one sets what it's given, the rest comes from the one around it. See Installation for more.

One animationCopy Anchor Link

Animated parts accept two optional props, transition and exitTransition (Motion transitions), to change their own timing:

<Dialog.Content transition={{ type: 'spring', stiffness: 300, damping: 30 }} />

Your own componentsCopy Anchor Link

The tokens every primitive moves with are exported, to animate your own components the same way:

import { motion } from 'motion/react';
import { spring, useTempoTransition } from '@animate-ui/react/utils/motion';

function Badge() {
  const transition = useTempoTransition(spring.pop);
  return (
    <motion.span
      initial={{ scale: 0.7, opacity: 0 }}
      animate={{ scale: 1, opacity: 1 }}
      transition={transition}
    />
  );
}

useTempoTransition applies the provider's tempo. For the full set of rules and recipes, give your AI assistant the skill.

AccessibilityCopy Anchor Link

Reduced motion, keyboard and focus work without any setup. See Accessibility.