Eased

Eased

Eased 是一个面向 shadcn 的动效优先 React 组件库，可通过 shadcn CLI 安装。

eased.dev · 组件 · 文档

本仓库是 Eased 的免费部分，采用 MIT 许可证：包含所有免费组件的源代码、文档，以及由 eased.dev/r 提供的注册表 JSON。

安装

使用 shadcn CLI，按注册表名称或 URL 添加组件：

npx shadcn add @eased/button

npx shadcn add https://eased.dev/r/button.json

@eased/<name> 之所以可用，是因为 Eased 已列入 shadcn 注册表索引，因此 CLI 无需在 components.json 中配置 registries 条目，就能找到 @eased。

URL 形式需要 .json 扩展名：https://eased.dev/r/button.json 有效，而 https://eased.dev/r/button 会返回 404。

CLI 会将组件的源代码复制到 components/eased/<name>/，安装其 npm 依赖，并将 Eased 样式表合并到你的全局 CSS 中。无需导入 CSS 文件。之后，你便拥有这些代码。

要求

• React 19
• Tailwind CSS v4
• components.json。如果项目中没有，请运行 npx shadcn init。

CLI 会为你安装各组件的 npm 依赖。所有免费组件使用的依赖包括 @base-ui/react（36 个）、@tanstack/react-table（2 个）、d3-scale（1 个）、d3-shape（1 个）、motion（55 个）、shiki（3 个）；括号中为使用各依赖的组件数量。

免费组件

操作

组件	名称	功能	安装	文档	源代码
按钮	button	面向 React 和 shadcn 的动效按钮，带有宽度保持不变的加载状态。	npx shadcn add @eased/button	文档	源代码
撤销胶囊	undo-pill	面向 React 和 shadcn 的动效撤销胶囊，带有倒计时环，倒计时结束后才会执行操作。	npx shadcn add @eased/undo-pill	文档	源代码
按键	kbd	面向 React 和 shadcn 的动效键帽，会在真实按键按下时同步下沉。	npx shadcn add @eased/kbd	文档	源代码

输入

组件	名称	功能	安装	文档	源码
输入框	input	适用于 React 和 shadcn 的动画文本输入框，带有前置和后置扩展，以及错误状态。	npx shadcn add @eased/input	文档	源码
多行文本框	textarea	适用于 React 和 shadcn 的动画多行文本框，可随文本内容增长，并带有字符计数器。	npx shadcn add @eased/textarea	文档	源码
字段	field	适用于 React 和 shadcn 的动画表单字段，包含标签、控件和一行帮助或错误信息。	npx shadcn add @eased/field	文档	源码
滑块	slider	适用于 React 和 shadcn 的动画滑块，支持单值或范围，并可实时显示数值。	npx shadcn add @eased/slider	文档	源码
数字字段	number-field	适用于 React 和 shadcn 的动画数字字段，按住步进按钮时速度会逐渐加快。	npx shadcn add @eased/number-field	文档	源码
OTP 字段	otp-field	适用于 React 和 shadcn 的动画一次性验证码字段，支持自动填充和跨单元格粘贴。	npx shadcn add @eased/otp-field	文档	源码
日期选择器	date-picker	适用于 React 和 shadcn 的动画日期选择器，支持日历弹出层、输入日期和日期范围。	npx shadcn add @eased/date-picker	文档	源码
文件上传	file-upload	适用于 React 和 shadcn 的动画文件上传组件，带有拖放区、逐文件进度，以及拒绝文件的内联原因说明。	npx shadcn add @eased/file-upload	文档	源码

选择

组件	名称	功能	安装	文档	源码
分段控件	segmented	适用于 React 和 shadcn 的动画分段控件，可从少数选项中选择一个。	npx shadcn add @eased/segmented	文档	源码
选项卡	tabs	适用于 React 和 shadcn 的动画选项卡，带下划线或胶囊形指示器。	npx shadcn add @eased/tabs	文档	源码
切换组	toggle-group	适用于 React 和 shadcn 的动画切换组，支持单选或多选。	npx shadcn add @eased/toggle-group	文档	源码
单选组	radio-group	适用于 React 和 shadcn 的动画单选组，支持普通单选按钮或可选卡片。	npx shadcn add @eased/radio-group	文档	源码
复选框	checkbox	适用于 React 和 shadcn 的动画复选框，父级复选框支持不确定状态。	npx shadcn add @eased/checkbox	文档	源码
开关	switch	适用于 React 和 shadcn 的动画开关，添加标签后会成为完整的设置行。	npx shadcn add @eased/switch	文档	源码
选择器	select	适用于 React 和 shadcn 的动画选择器，打开时会在触发器上方显示所选选项。	npx shadcn add @eased/select	文档	源码
组合框	combobox	适用于 React 和 shadcn 的动画组合框，支持筛选、清除按钮和多选标签。	npx shadcn add @eased/combobox	文档	源码
评分	rating	适用于 React 和 shadcn 的动画星级评分，支持悬停预览、半星步进和只读模式。	npx shadcn add @eased/rating	文档	源码

导航

组件	名称	功能	安装	文档	源码
面包屑	breadcrumb	适用于 React 和 shadcn 的动画面包屑，空间不足时会将中间项折叠到菜单中。	npx shadcn add @eased/breadcrumb	文档	源码
分页	pagination	适用于 React 和 shadcn 的动画分页，翻页时宽度始终不变。	npx shadcn add @eased/pagination	文档	源码
轮播	carousel	适用于 React 和 shadcn 的动画轮播，支持滚动吸附、鼠标拖动和方向键操作。	npx shadcn add @eased/carousel	文档	源码

覆层

组件	名称	功能	安装	文档	源码
弹出框	popover	一款适用于 React 和 shadcn 的动画弹出框，基于 Base UI 构建，从触发器打开。	npx shadcn add @eased/popover	文档	源码
工具提示	tooltip	一款适用于 React 和 shadcn 的动画工具提示，可选显示快捷键，触屏设备上不会显示。	npx shadcn add @eased/tooltip	文档	源码
对话框	dialog	一款适用于 React 和 shadcn 的动画对话框，支持警告对话框和嵌套对话框，基于 Base UI 构建。	npx shadcn add @eased/dialog	文档	源码
命令面板	command-palette	一款适用于 React 和 shadcn 的动画命令面板，按 ⌘K 打开，按 Enter 执行第一个匹配项。	npx shadcn add @eased/command-palette	文档	源码
下拉菜单	dropdown-menu	一款适用于 React 和 shadcn 的动画下拉菜单，包含复选框行、单选框行、快捷键和子菜单。	npx shadcn add @eased/dropdown-menu	文档	源码
上下文菜单	context-menu	一款适用于 React 和 shadcn 的动画上下文菜单，可通过右键单击或长按打开，并包含子菜单。	npx shadcn add @eased/context-menu	文档	源码
抽屉	sheet	一款适用于 React 和 shadcn 的动画抽屉，从屏幕边缘滑入，并在小屏幕上变为底部抽屉。	npx shadcn add @eased/sheet	文档	源码

状态

组件	名称	功能	安装	文档	源码
徽章	badge	一款适用于 React 和 shadcn 的动画徽章，用于显示状态和计数，可选显示实时指示点。	npx shadcn add @eased/badge	文档	源码
进度条	progress	一款适用于 React 和 shadcn 的动画进度条，支持不确定状态，并可过渡到实际值。	npx shadcn add @eased/progress	文档	源码
加载指示器	spinner	一款适用于 React 和 shadcn 的动画加载指示器，会在屏幕外暂停，并向屏幕阅读器播报。	npx shadcn add @eased/spinner	文档	源码
骨架屏	skeleton	一款适用于 React 和 shadcn 的动画骨架屏，页面上的所有占位符共享同一道闪光效果。	npx shadcn add @eased/skeleton	文档	源码
头像	avatar	一款适用于 React 和 shadcn 的动画头像，悬停时头像组会彼此散开。	npx shadcn add @eased/avatar	文档	源码
提示框	alert	一款适用于 React 和 shadcn 的动画提示框，用于显示上下文、成功、警告和错误消息。	npx shadcn add @eased/alert	文档	源码
消息提示	toast	一款适用于 React 和 shadcn 的动画消息提示堆栈，包含诸如“撤销”之类的操作按钮。	npx shadcn add @eased/toast	文档	源码

文本和数字

组件	名称	功能	安装	文档	源码
数字滚动	number-roll	适用于 React 和 shadcn 的动态数字计数器，支持按地区格式化。	npx shadcn add @eased/number-roll	文档	源码
文本切换	text-swap	适用于 React 和 shadcn 的动态文本切换组件，可更改标签或数值，同时避免相邻内容跳动。	npx shadcn add @eased/text-swap	文档	源码

列表和表格

组件	名称	功能	安装	文档	源码
表格	table	适用于 React 和 shadcn 的纤细线条表格，基于 TanStack Table 构建，带有粘性表头，并支持紧凑或宽松的行距。	npx shadcn add @eased/table	文档	源码
单元格套件	cells	一组适用于 React 和 shadcn 的动态表格单元格，可用于名称、状态、数字、进度、时间和 ID。	npx shadcn add @eased/cells	文档	源码
手风琴	accordion	适用于 React 和 shadcn 的动态手风琴组件，基于 Base UI Accordion 构建。	npx shadcn add @eased/accordion	文档	源码
滚动区域	scroll-area	适用于 React 和 shadcn 的动态滚动区域，带有纤细的覆盖式滚动条和边缘渐隐效果。	npx shadcn add @eased/scroll-area	文档	源码
树形视图	tree	适用于 React 和 shadcn 的动态文件树，支持符合 WAI-ARIA 的键盘操作。	npx shadcn add @eased/tree	文档	源码

聊天

组件	名称	功能	安装	文档	源码
输入框	composer	适用于 React 和 shadcn 的动态聊天输入框，支持文件附件，并在回复流式生成时显示停止按钮。	npx shadcn add @eased/composer	文档	源码
消息	message	适用于 React 和 shadcn 的动态聊天消息，可渲染 AI SDK UIMessage 文本和文件部分。	npx shadcn add @eased/message	文档	源码
附件标签	attachment	适用于 React 和 shadcn 的动态附件标签，支持图片缩略图、上传进度和重试。	npx shadcn add @eased/attachment	文档	源码

AI

组件	名称	功能	安装	文档	源码
微光文本	shimmer-text	适用于 React 和 shadcn 的动态微光文本，可在任务进行时显示状态标签。	npx shadcn add @eased/shimmer-text	文档	源码
思考栏	thinking-bar	适用于 React 和 shadcn 的动态思考栏，用于显示推理模型已思考的时长。	npx shadcn add @eased/thinking-bar	文档	源码
Agent 光球	agent-orb	适用于 React 和 shadcn 的动态 Agent 光球，用于显示助手处于空闲、聆听、思考还是说话状态。	npx shadcn add @eased/agent-orb	文档	源码

图表

组件	名称	功能	安装	文档	源码
Sparkline	sparkline	一个适用于 React 和 shadcn 的动画迷你折线图，宽度与单词相当，并可选择显示拖动读数。	npx shadcn add @eased/sparkline	文档	源码

代码

组件	名称	功能	安装	文档	源码
代码块	code-block	一个适用于 React 和 shadcn 的动画代码块，支持 Shiki 高亮、复制按钮和长代码块折叠。	npx shadcn add @eased/code-block	文档	源码
代码选项卡	code-tabs	适用于 React 和 shadcn 的动画代码选项卡，可展示多个文件，或按包管理器展示一条命令。	npx shadcn add @eased/code-tabs	文档	源码
代码片段	snippet	适用于 React 和 shadcn 的动画命令片段，以单行命令配合复制按钮呈现。	npx shadcn add @eased/snippet	文档	源码

表面与焦点

组件	名称	功能	安装	文档	源码
卡片	card	适用于 React 和 shadcn 的卡片，包含 shadcn 的各个部分，并可选用链接让整张卡片都可点击。	npx shadcn add @eased/card	文档	源码
同心框架	concentric-frame	适用于 React 和 shadcn 的布局框架，通过 CSS 变量使嵌套圆角保持同心。	npx shadcn add @eased/concentric-frame	文档	源码
渐进模糊	progressive-blur	适用于 React 和 shadcn 的渐进模糊效果，可在标题栏、底部栏和编辑器下方让内容向边缘渐隐。	npx shadcn add @eased/progressive-blur	文档	源码
图片对比	image-compare	适用于 React 和 shadcn 的动画图片对比滑块，可通过拖动或键盘移动分隔线。	npx shadcn add @eased/image-compare	文档	源码

Mac

组件	名称	功能	安装	文档	源码
Mac 菜单弹出层	mac-menu-popover	适用于 React 和 shadcn 的动画 macOS 菜单栏弹出层，可用于 Tauri 和 Electron 应用。	npx shadcn add @eased/mac-menu-popover	文档	源码
Mac HUD	mac-hud	适用于 React 和 shadcn 的动画 macOS 音量和亮度 HUD，提供经典方形样式或 macOS 26 药丸样式。	npx shadcn add @eased/mac-hud	文档	源码

60 个免费组件，分为 14 个类别。每个组件在 docs/components/ 中都有对应页面。

面向 AI Agent

• llms.txt：文档和所有组件的索引
• llms-full.txt：文档和所有免费组件页面合并而成的单个文件
• Motion 文档：每个组件使用的弹簧、曲线和时长
• AI 和 MCP 文档：MCP 服务、技能和各客户端的配置

MCP 服务

Eased MCP 服务地址为 https://eased.dev/api/mcp。Claude Code：

claude mcp add --transport http eased https://eased.dev/api/mcp

Cursor，配置文件为 .cursor/mcp.json：

{
  "mcpServers": {
    "eased": {
      "url": "https://eased.dev/api/mcp"
    }
  }
}

Skills

npx skills add easedui/skills

仅安装 eased-motion：只包含动效规则。

npx shadcn add https://eased.dev/r/eased-skill.json

安装 eased-skill：完整的 Eased 设计技能，写入 .claude/skills/eased/SKILL.md。

无障碍

每个动画组件都会遵循 prefers-reduced-motion。摘自动效文档：

每个动画组件都有一个减少动效的分支。当访问者的系统要求减少动效时，动画会变为 100ms 的透明度渐变（reducedFade），或不播放动画；循环动画也会停止。

许可证

免费组件采用 MIT 许可证：请参阅 LICENSE。Eased Pro 是单独付费的版本，详见 eased.dev。本仓库不包含 Pro 源码。

仓库内容

路径	内容
src/registry/eased/<name>/	组件源码及其 README.md（用法、属性、动效）
src/registry/eased/_primitives/	组件所依赖的共享基础组件
src/registry/eased/lib/	共享辅助工具：弹簧和持续时间（motion.ts）、按压样式（press.ts），以及 DOM、平台和格式辅助工具
src/registry/eased/mac-*/	适用于 Tauri 和 Electron 应用的 Mac 组件，每个组件都附带其 Tauri 窗口配置
docs/	Markdown 格式的文档：安装、主题设置、动效、AI 和 MCP，以及每个组件各自的页面
public/r/	构建后的注册表 JSON
registry.json	注册表清单。Eased 样式表对应其中的 eased-tokens 项
context7.json	Context7 的设置

报告问题

提交 GitHub issue，或使用 eased.dev/report。