跳到主要内容
Motion Lexicon
组件28
操作复制按钮加载按钮长按确认长按操作
浮层命令面板上下文菜单抽屉下拉选择模态框气泡浮层
输入展开搜索浮动标签输入框行内校验验证码输入密码强度刻度滑块标签输入
导航折叠面板滚动隐藏栏分页分段控制标签页
数据筛选网格拖拽排序列表可排序表格
反馈进度条任务步骤数值变化
原子动效44
入场与退场编排与时间位移与变换状态过渡滚动动效反馈与交互缓动弹簧动效循环与环境动效润色与效果性能原则
资源场景指南Agent SkillGitHub
React · Motion · shadcn registry

可直接复制的 React 动效组件

28 个组件npx shadcn@latest add

操作

4
复制按钮copy-button
加载按钮loading-button
长按确认hold-to-confirm
长按操作long-press

浮层

6
命令面板command-palette
上下文菜单context-menu
抽屉drawer
下拉选择dropdown
模态框modal
气泡浮层popover

输入

7
展开搜索expanding-search
浮动标签输入框floating-label
行内校验inline-validation
验证码输入otp-input
密码强度password-strength
刻度滑块slider-detents
标签输入tag-input

导航

5
折叠面板accordion
滚动隐藏栏hide-on-scroll
分页pagination
分段控制segmented-control
标签页tabs

数据

3
筛选网格filter-grid
拖拽排序列表reorder-list
可排序表格sortable-table

反馈

3
进度条progress-bar
任务步骤task-steps
数值变化value-flash