原语 / Radix UI
Sidebar · Radix UI
可组合、可换肤的侧边栏，菜单按钮共享一块滑动高亮，折叠时内容走同一条曲线。
安装
Radix UI 的原语保持上游 API 不变，安装只需要三步：加包、加组件、把 import 换掉。
bun add @animate-ui/react motion
bunx shadcn@latest add sidebar
bunx @animate-ui/cli@latest animate sidebar用法
从 Animate UI 引入原语，其余结构、属性与 data 属性都保持 Radix UI 的写法。也可以按子路径单独引入：
import { Sidebar } from '@animate-ui/react/primitives/radix-ui';这一页没有独立示例，完整用法见 Radix UI 官方文档；换成 Animate UI 的 import 即可获得同样的动效。
动效
- 菜单与子菜单共享一块表面，高亮以 stiffness 500 / damping 40 在按钮之间传递，始终只有一块。
- 高亮从上一个按钮滑入，不凭空出现；进入子菜单时旧表面滑走、新表面淡入；折叠为图标时跟随按钮尺寸。
所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。
API
动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 与 Radix 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 版本。