文档
简介
为 Radix UI、Base UI 与 React Aria 提供带动效的即插即用原语，基于 Motion 构建。
Animate UI 动的是组件底下的原语，不是组件本身。你的 shadcn/ui 组件仍然属于你：结构、样式、API 都不变，改变的只有 primitive 的 import 来源。
改动前
import { Accordion as AccordionPrimitive } from 'radix-ui';改动后
import { Accordion as AccordionPrimitive } from
'@animate-ui/react/primitives/radix-ui';为什么是原语
shadcn/ui 组件更新频繁，风格与底座也各不相同。Animate UI 不复制这些组件：每个 Animate UI 原语的 API 与它所属的库完全一致，只是内部多了 Motion。无论你的 shadcn/ui 怎么配置，换 import 就够了，一条命令可以处理所有已安装的组件：
bunx @animate-ui/cli@latest animate all动效的分寸
每个原语都遵守同一组规则：
- 弹簧与短补间，使用强 ease-out 曲线；
- 退场比入场更快，离开不拖沓；
- 只改变 transform 与 opacity，不触发布局；
- 动画可被打断，随时从当前位置接管；
- 键盘导航不做等待动画；
- 默认尊重系统减少动效设置，不需要额外配置。
克制是刻意的。一天要打开五十次的菜单必须显得快，而不是显得厉害：每个原语只动到能说明“它从哪来、到哪去”为止，然后把路让开。
三套底座，一套动效
Animate UI 支持 4 套 shadcn/ui 的底座，外加一批自有原语：125 个原语、9个背景、2 套动画图标库。每一页都标注了对应的库，切换库时组件结构不变，只换 import 路径。
Base UIshadcn/ui 的新底座，无样式、可组合，状态与无障碍由 Base UI 负责。28Radix UI最成熟的 headless 原语库，shadcn/ui 的默认底座，API 稳定、生态最大。26React AriaAdobe 出品，交互与无障碍覆盖最细，适合复杂表单与国际化场景。24Animate UI不属于任何底座的自有原语：文字、按钮、光标、背景与效果。47
接下来
从安装开始，或者先看 原语总览。如果你想把现有项目从 v1 迁过来，CLI 里的 migrate 会列出每一步。
本站为非官方中文文档，内容译自 animate-ui.com，对应 2026-10-18 版本；组件与文案版权归原作者 Skyleen 所有。