开始
@animate-ui/react
@animate-ui/react 的导出结构、peer 依赖、Provider 与自定义动效。
@animate-ui/react 提供 Radix UI、Base UI 与 React Aria 的每一个原语，API 与对应库完全一致，内部换成 Motion。换 import，组件就动起来：部件、props、data 属性与无障碍行为仍然是那个库的。
安装
bun add @animate-ui/react motion它使用你项目已经依赖的那套原语库，其余都是可选的 peer 依赖，用哪个装哪个。
| 包 | 用途 |
|---|---|
| motion | 全部组件 |
| react / react-dom | 全部组件（React 19） |
| radix-ui | primitives/radix-ui |
| @base-ui/react | primitives/base-ui |
| react-aria-components | primitives/react-aria |
| input-otp | primitives/input-otp |
| @shadcn/react | primitives/questionnaire |
| @floating-ui/react | primitives/tooltip（Animate UI 自有） |
| shiki | primitives/code-block |
用法
只改 import 来源，别的都不动：
import { Dialog } from 'radix-ui';
import { Dialog } from '@animate-ui/react/primitives/radix-ui';import 路径与库本身一一对应：
| 库 | 伞形入口 | 单个原语 |
|---|---|---|
| Radix UI | @animate-ui/react/primitives/radix-ui | @animate-ui/react/primitives/radix-ui/<primitive> |
| Base UI | @animate-ui/react/primitives/base-ui | @animate-ui/react/primitives/base-ui/<primitive> |
| React Aria | @animate-ui/react/primitives/react-aria | @animate-ui/react/primitives/react-aria/<primitive> |
Preview Link Card 不在伞形入口里，只能从@animate-ui/react/primitives/<library>/preview-link-card 引入。伞形入口会重新导出库中其余内容（Slot、Label、Field…），所以混合 import 仍然可用。
入口
| import | 内容 |
|---|---|
| primitives/radix-ui | Radix UI 原语，带动效 |
| primitives/base-ui | Base UI 原语，带动效 |
| primitives/react-aria | React Aria 组件，带动效 |
| primitives/<name> | Animate UI 自有组件、按钮、文字与效果（tabs、texts/typing…） |
| icons | 动画图标核心：AnimateIcon、IconWrapper |
| provider | AnimateUIProvider |
| utils/motion | 动效 token 与减少动效辅助函数 |
| utils/<name> | 共享 hook：use-page-visible、use-is-in-view、use-controlled-state… |
每个入口都是独立模块，只会打包你实际 import 的内容。
自定义
节奏与勾选
AnimateUIProvider 是可选的，不包时使用默认值。
import { AnimateUIProvider } from '@animate-ui/react/provider';
<AnimateUIProvider tempo={1.2} checkAnimation="pop">
{children}
</AnimateUIProvider>;| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| tempo | number | 1 | 乘到每个时长与弹簧上，0.8 更利落，1.2 更从容。 |
| checkAnimation | 'draw' | 'pop' | 'draw' | 勾选是画出来还是弹出来。 |
| reducedMotion | 'user' | 'never' | 'always' | 'user' | 跟随系统、永不禁用、或始终减少。 |
Provider 可以嵌套：最近的一层决定它设置的项，其余继承外层。
单个动画
带动效的部件接受 transition 与 exitTransition 两个可选属性（Motion 的 transition），用来单独改时长与曲线：
<Dialog.Content transition={{ type: 'spring', stiffness: 300, damping: 30 }} />你自己的组件
每个原语使用的 token 都导出了，可以用同样的方式给你自己的组件接上动效：
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 会应用 Provider 的 tempo，让自定义动效与整站节奏一致。
无障碍
减少动效、键盘操作与焦点管理都不需要额外配置。详见无障碍。
对应官方文档 2026-10-18 版本。