原语 / Base UI
Sidebar · Base UI
可组合、可换肤的侧边栏；菜单按钮共享一块滑动高亮，折叠为图标时所有内容走同一条曲线。
安装
Base UI 的原语保持上游 API 不变，安装只需要三步：加包、加组件、把 import 换掉。
bun add @animate-ui/react motion
bunx shadcn@latest add sidebar
bunx @animate-ui/cli@latest animate sidebar用法
从 Animate UI 引入原语，其余结构、属性与 data 属性都保持 Base UI 的写法。也可以按子路径单独引入：
import { Sidebar } from '@animate-ui/react/primitives/base-ui';这一页没有独立示例，完整用法见 Base UI 官方文档；换成 Animate UI 的 import 即可获得同样的动效。
动效
- 菜单与子菜单共享一块表面，高亮以 stiffness 500 / damping 40 的弹簧在按钮之间传递，任何时候只有一块；没有高亮时 200ms 淡入。
- 按钮裁剪内容，高亮从上一个按钮滑入而不是在边缘凭空出现；折叠为图标时高亮跟随按钮尺寸变化。
所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。
API
动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 与 Base UI 完全一致。
| 属性 | 类型 | 默认值 |
|---|---|---|
| defaultOpen | boolean | true |
| open | boolean | — |
| onOpenChange | (open: boolean) => void | — |
| animateOnHover | boolean | true |
| transition | Transition | { duration: 0.28, ease: [0.77, 0, 0.175, 1] } |
| transition | Transition | { duration: 0.28, ease: [0.77, 0, 0.175, 1] } |
| animateOnHover | boolean | the Provider's animateOnHover |
| open | ReactNode | — |
| closed | ReactNode | — |
| transition | Transition | { duration: 0.15, ease: [0.23, 1, 0.32, 1] } |
未列出的属性与上游 API 完全一致，可在 官方文档 查阅。
内容对应官方文档 2026-10-18 版本。