换一行 import组件就开始动
Animate UI 把 Radix UI、Base UI、React Aria 的底座原语换成带动效的版本。结构、样式、API 都不变，包括你正在用的 shadcn/ui 组件。
// components/ui/dialog.tsx - import { Dialog } from 'radix-ui'; + import { Dialog } from '@animate-ui/react/primitives/radix-ui';
三套底座加一套自有原语，共用同一组弹簧、时长与减少动效策略。
4套底座
125个原语
773个动画图标
Accordion · Base UI 原语真实组件
部件、props、data 属性全部保持 Base UI 的写法，只有动效换了实现。
当前 tempo 1× · 展开任意一项，动效按这个节奏播放
import { Accordion } from '@animate-ui/react/primitives/base-ui'真实组件，不是截图键盘可达尊重减少动效
开关一按，
原语就动
这是一枚真实的 Base UI Switch，动效由 Animate UI 接管。它切换的不只是这块色域，也是整页的动效层。
点击切换 · 状态 开
Base UI SwitchMotion 14tempo 1×
三步，接上
先装包
装上 @animate-ui/react 与 motion，底座继续用你已经在用的那一套。
bun add @animate-ui/react motion再换 import
CLI 读取 components.json，只改 primitive 的来源，其余代码原样保留。
bunx @animate-ui/cli@latest animate all最后调节奏
一个 tempo 乘到所有时长与弹簧上，整站快慢统一。
<AnimateUIProvider tempo={1.2}># 项目根目录 $ bun add @animate-ui/react motion ok 2 packages installed # 只装包，没有复制任何组件
第 1 步的命令
常见问题
替换、体积与迁移。
它和 shadcn/ui 冲突吗？
不冲突。Animate UI 不复制你的组件，只把组件依赖的 primitive 换成带动效的版本；结构、类名与 API 都留在原处，CLI 通过 components.json 找到它们。
必须用 Tailwind 吗？
不必须。原语只负责行为、无障碍与动效，样式仍然是你自己的。文档里的类名只是示例，换成 CSS Modules 或原生 CSS 一样工作。
支持 React 18 吗？
要求 React 19。motion 14 是 peer 依赖，三套底座（radix-ui、@base-ui/react、react-aria-components）也需要各自安装。
会让包变大吗？
CLI 只修改现有文件，不复制组件代码。体积主要来自 motion 14 与你在用的那套底座；没有用到的原语不会进入构建。
减少动效怎么处理？
默认跟随 prefers-reduced-motion：去掉位移与缩放，保留淡入和状态变化。也可以在 AnimateUIProvider 上用 reducedMotion 覆盖全局选择。
从 v1 怎么迁移？
运行 bunx @animate-ui/cli@latest migrate。它先改能自动处理的 import，再列出需要手动处理的文件与行号，最后才询问是否删除不再被引用的 v1 文件。
装一次，全都动
复制两条命令，在项目根目录执行。CLI 会处理所有已安装的 shadcn/ui 组件，再把改动逐项列给你。
在项目根目录执行
第一步 · 安装依赖
$ bun add @animate-ui/react motion第二步 · 接入组件
$ bunx @animate-ui/cli@latest animate all