关于 affectUI
affectUI 为 AI 产品和 SaaS 应用提供 React 组件、插图与动效。组件以内置样式的单个 .tsx 文件交付，并支持暗色模式、无障碍交互和响应式布局。
主要功能
- 01单个 .tsx 文件内含样式
- 02组件动画与动效
- 03内置暗色模式
- 04支持键盘操作的无障碍控件
- 05基于容器查询的响应式布局
适用场景
- 01为 AI 产品添加交互控件
- 02构建引导和进度界面
- 03为 SaaS 页面制作动画区块
MCP 相关
其 MCP 服务可让 Claude Code、Cursor 等 AI 客户端搜索组件、查看文档并将组件添加到项目中。
配置
远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。
服务地址
https://www.affectui.com/api/mcp一键复制安装命令
Claude CodeTerminal
claude mcp add --transport http flohoeller-affectui https://www.affectui.com/api/mcpCursor.cursor/mcp.json
{"mcpServers":{"flohoeller-affectui":{"type":"http","url":"https://www.affectui.com/api/mcp"}}}在 Cursor 中打开VS Code.vscode/mcp.json
{"servers":{"flohoeller-affectui":{"type":"http","url":"https://www.affectui.com/api/mcp"}}}在 VS Code 中打开Claude Desktopclaude_desktop_config.json
{"mcpServers":{"flohoeller-affectui":{"type":"http","url":"https://www.affectui.com/api/mcp"}}}Windsurf~/.codeium/windsurf/mcp_config.json
{"mcpServers":{"flohoeller-affectui":{"serverUrl":"https://www.affectui.com/api/mcp"}}}命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。
全部服务地址
Streamable HTTP
https://www.affectui.com/api/mcp需要授权工具
4| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| query | string | 是 | UI 应实现的功能或呈现的外观 |
| section | enum | 否 | 限定为一个区段Components | Screens | Blocks | Illustrations | Motion |
| free_only | boolean | 否 | 仅限免费项目 |
详细介绍
affectUI 是一个精心打造的 React 组件、插画和动效库，适用于 AI 产品和现代 SaaS 应用。每个项目都是一个包含自身样式的 .tsx 文件：无需 Tailwind、无需配置 CSS，也无需动画库。使用 shadcn CLI 安装，或直接复制文件；代码归你所有。
展示
以下是几个精选项目，均取自 affectui.com 的实时页面。标注 Pro 的项目属于 affectUI Pro，不包含在此代码库中；其他项目均可从此处免费安装。
Agent 团队 提示词自动输入，并分支为三个 Agent，每个都有各自的角色和重叠的工具徽标 |
互动栏 在一个胶囊按钮中点赞、评论、转发和分享——图标弹出并填充，计数逐位滚动显示 |
团队邀请 队友彼此连接——光标将新队友拖入空位，连线变为实线，他们随即上线 |
命令菜单 Pro 在一个字段中搜索并运行任意内容——带徽标和 ⌘1–⌘5 的工具操作，以及带图标的日常命令 |
进度跟踪器 带动画进度条的引导清单，勾选标记自动绘制并自动播放 |
KPI 图表 Pro 包含多线图和随指针移动的工具提示的指标卡片 |
模型转盘 AI 模型名称排列在旋转的转筒上——边缘处的行向外弯曲，每个模型落在柔和的灰色填充区域中 |
徽标集群 中央白色圆盘上是你的标志——公司徽标从圆盘中弹出，并环绕其四周 |
为什么选择 affectUI
- 每个组件都只有一个文件。 每个组件都是一个独立的
.tsx文件，样式也包含在其中。无需配置，也不需要 CSS 框架。 - 精致流畅的动效。 形变、错落渐显、滚动数字和平滑的状态变化，并且全部遵循
prefers-reduced-motion设置。 - 内置暗色模式。 当祖先元素带有
dark类或data-theme="dark"时，每个项目都会切换主题。 - 默认支持无障碍访问。 在适当的位置使用真实按钮、标签、键盘支持和实时区域。
- 响应式布局。 使用容器查询，因此项目会根据可用空间而非仅根据窗口大小进行适配。
安装
要求
- React 19，可搭配或不搭配 TypeScript 使用
- 任意 React 配置：Next.js、Vite、Remix 或纯 React
- 使用 shadcn CLI 时需要
@/*导入别名（Next.js 和 shadcn 默认会设置该别名）
使用 shadcn CLI
每个项目都有专属的注册表 URL。运行对应页面上的命令，页面位于 affectui.com 或下方的表格中：
npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json
文件会放到 components/ui 中，可直接导入。
喜欢更短的名称？在 components.json 中注册一次命名空间即可：
{
"registries": {
"@affectui": "https://www.affectui.com/r/{name}.json"
}
}
npx shadcn@latest add @affectui/reaction-bar
复制并粘贴
打开此仓库中的项目文件夹（components/、illustrations/ 或 motion/），将文件复制到你的项目中并导入即可。
用法
import { ReactionBar } from "@/components/ui/reaction-bar";
export function PostActions({ post }) {
return (
<ReactionBar
reactions={{ like: { count: post.likes, active: post.liked }, comment: { count: post.comments } }}
onReact={(key, state) => api.react(post.id, key, state.active)}
/>
);
}
每个项目的属性、键盘支持和无障碍访问说明都在其页面上，例如 Reaction Bar。
与 AI 工具搭配使用
affectUI 已为 Agent 做好准备。只需连接一次 MCP 服务，Claude Code、Cursor、VS Code 或 Codex 就能搜索所有项目、阅读文档并为你添加项目：
claude mcp add --transport http affectui https://www.affectui.com/api/mcp
其他客户端：将 { "mcpServers": { "affectui": { "url": "https://www.affectui.com/api/mcp" } } } 添加到其 MCP 配置中。无需任何设置，也可以让你的助手读取 llms.txt 或 llms-full.txt。affectui.com 上的每个页面也都有 复制提示词 栏，适用于 Claude、ChatGPT / Codex、Cursor 和 v0。设置详情：与 AI 搭配使用。
组件
| 名称 | 内容 | 安装 |
|---|---|---|
| 按钮 | 带图标的主要、次要、幽灵和危险按钮，提供多种尺寸和闪烁加载状态 | npx shadcn@latest add https://www.affectui.com/r/button.json |
| 按钮（简洁版） | 带图标的主要、次要、幽灵和危险按钮，提供多种尺寸和闪烁加载状态 | npx shadcn@latest add https://www.affectui.com/r/button-clean.json |
| 变更摘要 | 显示自上次以来的变化——每行一项指标，并配有彩色趋势指示 | npx shadcn@latest add https://www.affectui.com/r/change-summary.json |
| 变更摘要（简洁版） | 显示自上次以来的变化——每行一项指标，并配有彩色趋势指示 | npx shadcn@latest add https://www.affectui.com/r/change-summary-clean.json |
| 评论串 | 一条评论及其回复——助手说明执行了哪些操作，折叠展开详细信息，并回复 @提及 | npx shadcn@latest add https://www.affectui.com/r/comment-thread.json |
| 评论串（简洁版） | 一条评论及其回复——助手说明执行了哪些操作，折叠展开详细信息，并回复 @提及 | npx shadcn@latest add https://www.affectui.com/r/comment-thread-clean.json |
| 决策收件箱 | 待处理决策，每项提供两个快捷答复——答复后会显示确认信息并折叠隐藏 | npx shadcn@latest add https://www.affectui.com/r/decision-inbox.json |
| 决策收件箱（简洁版） | 待处理决策，每项提供两个快捷答复——答复后会显示确认信息并折叠隐藏 | npx shadcn@latest add https://www.affectui.com/r/decision-inbox-clean.json |
| 电子邮件草稿 | 供审核的 Agent 撰写邮件——切换收件人和语气、直接编辑、移除附件、发送或撤回并支持撤销 | npx shadcn@latest add https://www.affectui.com/r/email-draft.json |
| 电子邮件草稿（简洁版） | 供审核的 Agent 撰写邮件——切换收件人和语气、直接编辑、移除附件、发送或撤回并支持撤销 | npx shadcn@latest add https://www.affectui.com/r/email-draft-clean.json |
| 筛选菜单 | 分组筛选器，带可移除的标签、可折叠的复选框分组、“全部清除”功能和完整的键盘控制 | npx shadcn@latest add https://www.affectui.com/r/filter-menu.json |
| 筛选菜单（简洁版） | 分组筛选器，带可移除的标签、可折叠的复选框分组、“全部清除”功能和完整的键盘控制 | npx shadcn@latest add https://www.affectui.com/r/filter-menu-clean.json |
| 消息操作 | AI 消息下方的低调操作栏——复制后变为勾选标记，重新生成时会旋转并展开版本切换器，点赞和点踩按钮会弹出并询问原因，朗读功能则变成小型均衡器 | npx shadcn@latest add https://www.affectui.com/r/message-actions.json |
| 消息操作（简洁版） | AI 消息下方的低调操作栏——复制后变为勾选标记，重新生成时会旋转并展开版本切换器，点赞和点踩按钮会弹出并询问原因，朗读功能则变成小型均衡器 | npx shadcn@latest add https://www.affectui.com/r/message-actions-clean.json |
| 通知堆叠 | 通知卡片层叠排列——关闭最前面的卡片即可显示下一张 | npx shadcn@latest add https://www.affectui.com/r/notification-stack.json |
| 通知堆叠（简洁版） | 通知卡片层叠排列——关闭最前面的卡片即可显示下一张 | npx shadcn@latest add https://www.affectui.com/r/notification-stack-clean.json |
| OTP 输入框 | 精心设计的验证码输入框——焦点环平滑滑动，支持粘贴和 SMS 自动填充，出错时轻柔抖动，并可变形为“已验证”状态 | npx shadcn@latest add https://www.affectui.com/r/otp-input.json |
| OTP 输入框（简洁版） | 精心设计的验证码输入框——焦点环平滑滑动，支持粘贴和 SMS 自动填充，出错时轻柔抖动，并可变形为“已验证”状态 | npx shadcn@latest add https://www.affectui.com/r/otp-input-clean.json |
| 个人资料菜单 | 账户卡片，显示已登录用户、菜单操作和个人资料设置进度 | npx shadcn@latest add https://www.affectui.com/r/profile-menu.json |
| 个人资料菜单（简洁版） | 账户卡片，显示已登录用户、菜单操作和个人资料设置进度 | npx shadcn@latest add https://www.affectui.com/r/profile-menu-clean.json |
| 进度跟踪器 | 引导清单，带动画进度条、自动绘制的勾选标记和自动播放功能 | npx shadcn@latest add https://www.affectui.com/r/progress-tracker.json |
| 进度跟踪器（简洁版） | 引导清单，带动画进度条、自动绘制的勾选标记和自动播放功能 | npx shadcn@latest add https://www.affectui.com/r/progress-tracker-clean.json |
| 互动栏 | 在一个胶囊形控件中完成点赞、评论、转发和分享——图标弹出并填充，计数逐位滚动显示 | npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json |
| 互动栏（简洁版） | 在一个胶囊形控件中完成点赞、评论、转发和分享——图标弹出并填充，计数逐位滚动显示 | npx shadcn@latest add https://www.affectui.com/r/reaction-bar-clean.json |
| 分段控件 | 在 2 到 6 个选项之间切换——凸起的胶囊形指示器或下划线可平滑滑动、略微拉伸并可拖动，支持图标、计数和徽标 | npx shadcn@latest add https://www.affectui.com/r/segmented-control.json |
| 分段控件（简洁版） | 在 2 到 6 个选项之间切换——凸起的胶囊形指示器或下划线可平滑滑动、略微拉伸并可拖动，支持图标、计数和徽标 | npx shadcn@latest add https://www.affectui.com/r/segmented-control-clean.json |
| 智能推荐 | 推荐卡片，显示置信度信号，提供可切换的备选项，并支持接受后撤销 | npx shadcn@latest add https://www.affectui.com/r/smart-recommendation.json |
| 智能推荐（简洁版） | 推荐卡片，显示置信度信号，提供可切换的备选项，并支持接受后撤销 | npx shadcn@latest add https://www.affectui.com/r/smart-recommendation-clean.json |
| 思考加载器 | 用于 AI 回复的小型工作状态胶囊——带有八射线旋转图标和闪烁标签，标签会逐阶段切换，最后停在勾选标记上 | npx shadcn@latest add https://www.affectui.com/r/thinking-loader.json |
| 思考加载器（简洁版） | 用于 AI 回复的小型工作状态胶囊——带有八射线旋转图标和闪烁标签，标签会逐阶段切换，最后停在勾选标记上 | npx shadcn@latest add https://www.affectui.com/r/thinking-loader-clean.json |
| 提示面板 | 简短提示组成的网格，每条提示配有一个操作——采纳后会显示为已完成状态 | npx shadcn@latest add https://www.affectui.com/r/tips-panel.json |
| 提示面板（简洁版） | 简短提示组成的网格，每条提示配有一个操作——采纳后会显示为已完成状态 | npx shadcn@latest add https://www.affectui.com/r/tips-panel-clean.json |
| 工具调用卡片 | 用一行显示 Agent 的工具调用——实时计时器、状态和摘要；折叠展开后可查看高亮显示的参数和结果并进行复制，出错时可重试，并可通过分组汇总 | npx shadcn@latest add https://www.affectui.com/r/tool-call-card.json |
| 工具调用卡片（简洁版） | 用一行显示 Agent 的工具调用——实时计时器、状态和摘要；折叠展开后可查看高亮显示的参数和结果并进行复制，出错时可重试，并可通过分组汇总 | npx shadcn@latest add https://www.affectui.com/r/tool-call-card-clean.json |
区块
| 名称 | 说明 | 安装 |
|---|---|---|
| Logo Marquee | 无尽的“深受信赖”展示条——无缝循环，悬停时平滑停止，拖动时带有惯性，并将悬停的 Logo 显示为彩色 | npx shadcn@latest add https://www.affectui.com/r/logo-marquee.json |
| Testimonial Wall | 落地页上的引言墙——各列朝相反方向无尽滚动，悬停时平滑停止，拖动时带有惯性 | npx shadcn@latest add https://www.affectui.com/r/testimonial-wall.json |
插画
| 名称 | 内容 | 安装 |
|---|---|---|
| Agent Team | 提示词自动输入，并分支为三个 Agent，每个都有自己的角色和重叠的工具徽标 | npx shadcn@latest add https://www.affectui.com/r/agent-team.json |
| Cover Flow | 以 3D 方式浏览封面——拖动、轻扫或擦动这一排封面，封面会弹回到最近的位置；图片在画框中漂移，倒映在柔和的反光中 | npx shadcn@latest add https://www.affectui.com/r/cover-flow.json |
| DACH Region | DACH 地图，周边地区逐渐淡出，边界沿线有一条柔和的色带；可切换到美国、中国、印度、巴西或日本 | npx shadcn@latest add https://www.affectui.com/r/region-dach.json |
| Empty Calendar | 一叠标有空白的日历卡片，悬停时会展开 | npx shadcn@latest add https://www.affectui.com/r/empty-calendar.json |
| Enrichment Orbit | 两个环形轨道内的 Grok 图块，彗星和数据节点围绕它运行 | npx shadcn@latest add https://www.affectui.com/r/enrichment-orbit.json |
| Frost Cloud | 一朵带有镂空眼睛的磨砂白云，背景是红橙色或蓝色天空——它会漂浮、转头环顾、眨眼、跟随指针移动；点击时会眨眼并弹跳 | npx shadcn@latest add https://www.affectui.com/r/frost-cloud.json |
| Ghosted Chat | 未获回复的聊天消息被标记为已读，悬停时会显示一个踩的回复 | npx shadcn@latest add https://www.affectui.com/r/ghosted-chat.json |
| Glow Cloud | 一朵带眼睛的发光云朵，颜色为蓝色或红橙色——它会漂浮、转头环顾、眨眼、跟随指针移动；点击时会眨眼并弹跳 | npx shadcn@latest add https://www.affectui.com/r/glow-cloud.json |
| Integration Beam | 你的产品位于它连接的工具之间——光脉冲沿着弯曲的光束流动；悬停可聚焦某个工具，点击可暂停动画 | npx shadcn@latest add https://www.affectui.com/r/integration-beam.json |
| Integration Grid | 蜂窝状的集成徽标墙围绕着中央明亮的图块，图块上印有你的产品标记；徽标向边缘逐渐淡出 | npx shadcn@latest add https://www.affectui.com/r/integration-grid.json |
| Layer Stack | 五层等距堆叠，旁边有一个列表——选中的条目会将对应图层抽出，并显示彩色效果 | npx shadcn@latest add https://www.affectui.com/r/layer-stack.json |
| Lead Sourcing | ChatGPT 图块连接到 Gmail 和 Grok，连接线上有一道流动的光泽 | npx shadcn@latest add https://www.affectui.com/r/lead-sourcing.json |
| Logo Cluster | 你的标记位于中央的白色圆盘上——公司徽标从圆盘中弹出，并环绕其四周落定 | npx shadcn@latest add https://www.affectui.com/r/logo-cluster.json |
| Model Wheel | AI 模型名称排列在旋转的圆筒上——行列在边缘处向外弯曲，每个模型都会停在柔和的灰色底色上 | npx shadcn@latest add https://www.affectui.com/r/model-wheel.json |
| Side Folder | 横放的玻璃质感蓝色文件夹，悬停时袋口摆开，文档向右滑出 | npx shadcn@latest add https://www.affectui.com/r/side-folder.json |
| Tab Overload | 多个重叠的浏览器窗口，高亮效果会跟随悬停的标签页 | npx shadcn@latest add https://www.affectui.com/r/tab-overload.json |
| Team Invite | 队友彼此连接——光标将新成员拖入空位，连线随即变为实线，他们也会上线 | npx shadcn@latest add https://www.affectui.com/r/team-invite.json |
动效
| 名称 | 内容 | 安装 |
|---|---|---|
| 网格背景 | 细线网格在内容后方缓慢漂移，并向边缘逐渐淡出 | npx shadcn@latest add https://www.affectui.com/r/grid-background.json |
| 数字滚动器 | 里程表风格的数字——每位数字都会滚动到新值，并在滚动进入视野时从零开始计数 | npx shadcn@latest add https://www.affectui.com/r/number-ticker.json |
| 微光加载器 | 骨架屏区块共用一道柔和的扫光效果，还提供适用于“正在思考……”状态的闪烁文字 | npx shadcn@latest add https://www.affectui.com/r/shimmer-loader.json |
| 文字显现 | 文字逐词或逐字显现——每个部分在滚动进入视野时从柔和的模糊效果中浮现 | npx shadcn@latest add https://www.affectui.com/r/text-reveal.json |
affectUI Pro
另外还有 134 个组件、屏幕、区块和插图，包括命令菜单、聊天编辑器、KPI 图表、定价方案区块和完整的应用屏幕，这些都包含在 affectUI Pro 中：一次购买，终身更新。其源代码不在此仓库中。
贡献
发现了错误或缺少某个组件？提交问题。此处的文件会在每次发布时与 affectUI 源代码同步，因此修复通过问题提交，而非拉取请求。请参阅 CONTRIBUTING.md。
许可证
此仓库中的所有内容均根据 MIT 许可证发布。可用于个人和商业项目。 预览中展示的徽标归其所有者所有，仅作为示例内容。
如果 affectUI 为你节省了时间，点个 ⭐ 有助于让更多人发现它。
由 Flo 制作
评论
支持 Markdown
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。