# 界面图鉴：组件特点与免费 / 付费指南


## 1. Mantine


[官网](https://mantine.dev/) · React · **免费**

![Mantine](assets/01.webp)

一套覆盖日常产品界面的 React 工具箱，从按钮、表单到日期选择和弹窗都能沿用同一套设计语言。适合希望尽快搭出完整产品、又需要调整品牌样式的团队。

### 主要特点

- 组件之外还提供 Hooks、表单管理和通知，减少基础功能的拼装工作。
- 通过主题、样式 API 和 CSS 变量统一颜色、尺寸与明暗模式。
- 适合管理后台、会员中心和数据录入工具；复杂图表或业务流程仍需另外实现。

**适合用来做**：运营数据看板；报名/预约管理后台；AI 工具的设置与文件管理页

**还需要自己完成**：指标统计要接业务数据；任务拖拽要另实现；不是 3D 场景渲染器

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：淡入淡出 / 缩放过渡。Transition 组件提供预设与自定义进出场过渡，可用于提示、菜单和内容切换。偏日常界面反馈，不是整页视觉特效库。 [看官方动效](https://mantine.dev/core/transition/)

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://mantine.dev/llms.txt)

[Skills 指南](https://mantine.dev/guides/llms/)

**参考链接**：[项目介绍](https://mantine.dev/) · [源码与许可](https://github.com/mantinedev/mantine) · [MCP 接入说明](https://mantine.dev/guides/llms/) · [官方 LLM 文档](https://mantine.dev/llms.txt) · [官方 README](https://raw.githubusercontent.com/mantinedev/mantine/HEAD/README.md)


## 2. MUI


[官网](https://mui.com/) · React · **免费 + 付费**

![MUI](assets/02.webp)

以 Material Design 为基础的 React 组件体系，擅长表单密集、数据密集的业务界面。基础组件与 MUI X 数据组件分层提供，选型时要同时看视觉风格和高级功能的授权。

### 主要特点

- 基础控件、布局和主题系统比较完整，适合保持整套应用的一致性。
- MUI X 提供数据表格、日期选择、图表等，部分高级能力属于 Pro 或 Premium。
- 可以深度定制主题，但要做出完全不同于 Material 的品牌风格，需要额外设计投入。

**适合用来做**：企业 KPI 仪表盘；库存/订单管理；客服或财务操作台

**还需要自己完成**：高级数据组件可能收费；复杂图表和权限流程不是自动生成的

### 免费与付费

**免费部分**：Material UI 与 MUI X Community 免费；基础组件可用于商业应用。

**付费及其他费用**：MUI X Pro / Premium 的高级表格、图表等功能需要商业授权；模板可能另售。

**含动画组件**：折叠 / 淡入 / 滑动。提供 Collapse、Fade、Grow、Slide、Zoom 等过渡组件，适合弹层和内容区的进入退出，也能与自定义组件组合。 [看官方动效](https://mui.com/material-ui/transitions/)

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://mui.com/material-ui/llms.txt)

**参考链接**：[项目介绍](https://mui.com/) · [源码与许可](https://github.com/mui/material-ui) · [免费与付费范围](https://mui.com/pricing/) · [MCP 接入说明](https://mui.com/material-ui/getting-started/mcp/) · [官方 LLM 文档](https://mui.com/material-ui/llms.txt) · [官方 README](https://raw.githubusercontent.com/mui/material-ui/HEAD/README.md)


## 3. Ant Design


[官网](https://ant.design/) · React · **免费**

![Ant Design](assets/03.webp)

面向企业产品的 React 组件库，默认视觉理性、紧凑，适合信息密度较高的页面。它的价值在于让表格、筛选、表单和反馈遵循一致的交互方式。

### 主要特点

- Table、Form、Tree、Upload 等常见业务控件可以组合成完整后台。
- Design Token 支持统一主题与组件级调整，便于维护多页面产品。
- 适合运营、审核、CRM 和管理工具；鲜明的品牌展示页通常需要另做视觉设计。

**适合用来做**：CRM 客户管理；审批/工单系统；项目管理任务看板的外框

**还需要自己完成**：任务卡片拖拽、工作流引擎与权限后端另做；不是开箱 Trello

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://ant.design/llms.txt)

[Skills 指南](https://ant-design.antgroup.com/docs/react/for-agents)

**参考链接**：[项目介绍](https://ant.design/) · [源码与许可](https://github.com/ant-design/ant-design) · [MCP 接入说明](https://ant-design.antgroup.com/docs/react/mcp) · [官方 LLM 文档](https://ant.design/llms.txt) · [官方 AI 工作流 / Skills](https://ant-design.antgroup.com/docs/react/for-agents) · [官方 README](https://raw.githubusercontent.com/ant-design/ant-design/HEAD/README.md)


## 4. Chakra UI


[官网](https://chakra-ui.com/) · React · **免费 + 付费**

![Chakra UI](assets/04.webp)

强调可组合性的 React 组件系统。用统一的样式属性和主题规则组织界面，既能快速使用现成控件，也能把多个基础部件组合成自己的组件。

### 主要特点

- 复合组件把触发器、内容区等部分拆开，方便定制结构。
- 主题令牌、recipes 和语义颜色有助于维护品牌样式。
- 适合需要统一设计语言的产品；Pro 区块和模板属于额外购买内容。

**适合用来做**：订阅制 SaaS；会员中心；轻量项目工作台

**还需要自己完成**：大数据表格或财务分析模块需要单独确认或配库

### 免费与付费

**免费部分**：Chakra UI 核心组件采用 MIT，可免费使用。

**付费及其他费用**：Chakra UI Pro 的页面区块和模板需要购买；Pro 相关 MCP 工具也要求权限。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：基础 MCP 可公开接入；读取 Pro 区块等付费内容需要对应的 Chakra UI Pro 权限。

[AI 文档](https://chakra-ui.com/llms.txt)

[Skills 指南](https://chakra-ui.com/docs/get-started/ai/mcp-server)

**参考链接**：[项目介绍](https://chakra-ui.com/) · [源码与许可](https://github.com/chakra-ui/chakra-ui) · [免费与付费范围](https://pro.chakra-ui.com/pricing) · [MCP 接入说明](https://chakra-ui.com/docs/get-started/ai/mcp-server) · [官方 LLM 文档](https://chakra-ui.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/chakra-ui/chakra-ui/HEAD/README.md)


## 5. HeroUI


[官网](https://www.heroui.com/) · React · **免费 + 付费**

![HeroUI](assets/05.webp)

原 NextUI，面向 React 的带样式组件库，整体更偏现代产品界面。适合希望按钮、表单、卡片和弹窗一开始就有较完整视觉表现的项目。

### 主要特点

- 组件围绕交互状态、主题与无障碍行为组织，减少基础外观的重复设计。
- React 与 React Native 有不同的产品和接入入口，不能直接混用组件代码。
- 适合 SaaS、会员中心和产品官网；v2、v3 的 API 与样式方案需要分别匹配。

**适合用来做**：AI 助手 Web 客户端；创作者个人中心；轻电商账号与订单页

**还需要自己完成**：聊天消息服务、商品交易、支付和后台权限不属于 UI 库

### 免费与付费

**免费部分**：HeroUI 开源组件免费使用。

**付费及其他费用**：HeroUI Pro 组件、模板、设计系统与 Pro AI 能力需要购买，对应套餐可能带 AI 额度。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：公开文档 MCP 与 HeroUI Pro AI 分开；Pro MCP / Skills 和额度随购买的 Pro 套餐提供。

[AI 文档](https://heroui.com/llms.txt)

**参考链接**：[项目介绍](https://www.heroui.com/) · [源码与许可](https://github.com/heroui-inc/heroui) · [免费与付费范围](https://heroui.pro/) · [MCP 接入说明](https://github.com/heroui-inc/heroui-mcp) · [官方 LLM 文档](https://heroui.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/heroui-inc/heroui/HEAD/README.md)


## 6. PrimeReact


[官网](https://primereact.org/) · React · **有条件免费 / 付费**

![PrimeReact](assets/06.webp)

Prime 家族的 React 组件套件，侧重表格、树、选择器等业务控件。既有带样式的使用方式，也提供更底层的组合方式，适合需要较多控件类型的应用。

### 主要特点

- 数据展示、输入、菜单和反馈控件覆盖面广，适合集中完成后台页面。
- 不同样式层级允许在现成主题和自行设计之间选择。
- v10 及以前的 MIT 版本与新版商业授权分开，升级时需要重新确认使用资格。

**适合用来做**：ERP/库存后台；订单处理台；运营数据工作台

**还需要自己完成**：先选择版本与主题路线；不是自动完成商业流程的低代码系统

### 免费与付费

**免费部分**：PrimeReact v10 及此前已发布的 MIT 版本仍可免费使用。新版 Community 对符合资格的个人与小型组织免费。

**付费及其他费用**：新版超出 Community 资格的组织需要商业授权；Pro 组件、模板、设计工具与高级支持也另有收费。

组织须同时满足：开发者少于 5 人、员工少于 10 人、年收入低于 100 万美元、外部融资不超过许可规定的 300 万美元门槛。Community 需注册，并每年确认资格续期。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：MCP 包含在 PrimeUI 授权内；符合 Community 资格可随免费方案使用，否则按商业授权。

[AI 文档](https://primereact.dev/llms.txt)

[Skills 指南](https://primereact.dev/docs/primitive/guides/ai/plugin)

**参考链接**：[项目介绍](https://primereact.org/) · [源码与许可](https://github.com/primefaces/primereact) · [方案与收费](https://primeui.dev/pricing) · [Community 免费资格](https://primeui.dev/licenses/community) · [旧版 MIT 范围](https://primeui.dev/security) · [MCP 接入说明](https://primereact.dev/docs/primitive/guides/ai/mcp) · [官方 LLM 文档](https://primereact.dev/llms.txt) · [官方 AI 工作流 / Skills](https://primereact.dev/docs/primitive/guides/ai/plugin) · [官方 README](https://raw.githubusercontent.com/primefaces/primereact/HEAD/README.md)


## 7. React Suite


[官网](https://rsuitejs.com/) · React · **免费**

![React Suite](assets/07.webp)

React Suite 是面向桌面业务应用的 React 组件库，视觉克制、布局清晰。适合以表单、数据筛选和操作面板为主的内部产品。

### 主要特点

- 提供日期、选择器、表格、导航和反馈等成套业务控件。
- 主题与明暗模式便于统一多页应用的视觉。
- 适合管理后台和协作工具；高度艺术化的展示效果需搭配其他资源。

**适合用来做**：中小企业管理后台；人员/排班管理；服务预约管理

**还需要自己完成**：排班冲突计算、资源预约逻辑和日历排程引擎另做

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://www.rsuitejs.com/llms.txt)

**参考链接**：[项目介绍](https://rsuitejs.com/) · [源码与许可](https://github.com/rsuite/rsuite) · [MCP 接入说明](https://www.rsuitejs.com/guide/mcp-server/) · [官方 LLM 文档](https://www.rsuitejs.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/rsuite/rsuite/HEAD/README.md)


## 8. Semi Design


[官网](https://semi.design/zh-CN/basic/button) · React · **免费**

![Semi Design](assets/08.webp)

Semi Design 是面向企业应用的设计系统与 React 组件库，适合设计与研发需要共享组件规范的团队。常见业务控件之外，也提供主题定制相关工具。

### 主要特点

- 表格、表单、树和复杂选择器适合承载较密集的业务信息。
- 设计变量和主题方案可以把品牌样式落实到整套控件。
- 适合中后台和工作台；组件能力需要与业务权限、数据接口分别实现。

**适合用来做**：内容审核工作台；多业务运营平台；企业 SaaS 设置中心

**还需要自己完成**：推荐的是 UI 组织能力，不包含内容审核模型和业务规则

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[Skills 指南](https://semi.design/en-US/start/mcp-skills)

**参考链接**：[项目介绍](https://semi.design/zh-CN/basic/button) · [源码与许可](https://github.com/DouyinFE/semi-design) · [MCP 接入说明](https://semi.design/en-US/start/mcp-skills) · [官方 README](https://raw.githubusercontent.com/DouyinFE/semi-design/HEAD/README.md)


## 9. Arco Design React


[官网](https://arco.design/react/en-US/components/button) · React · **免费**

![Arco Design React](assets/09.webp)

Arco Design 的 React 实现，偏企业级产品的统一视觉与交互。适合要快速搭出多页面后台，同时保留主题定制空间的项目。

### 主要特点

- 提供成套表单、数据展示、导航与反馈控件，减少跨页面的不一致。
- 主题变量与设计系统工具便于调整品牌色和组件外观。
- React 与 Vue 版本各自维护，组件 API 和示例需按框架选择。

**适合用来做**：企业控制台；数据管理后台；多模块管理门户

**还需要自己完成**：若做强艺术风格的展示站，需要较多外观重设计

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://arco.design/react/en-US/components/button) · [源码与许可](https://github.com/arco-design/arco-design) · [官方 README](https://raw.githubusercontent.com/arco-design/arco-design/HEAD/README.md)


## 10. Fluent UI


[官网](https://react.fluentui.dev/) · React / Web Components · **免费**

![Fluent UI](assets/10.webp)

微软 Fluent 设计体系的 React 实现，适合需要接近 Microsoft 产品体验的应用。它着重处理控件交互、可访问性和跨组件的一致性。

### 主要特点

- 按钮、菜单、表格与表单等组件带有统一的状态与视觉规则。
- 主题令牌可用于品牌色、明暗模式和组件样式配置。
- 适合办公协作和企业工具；旧版与新版 React 包的 API 不应混用。

**适合用来做**：办公协作平台；企业知识工作台；Microsoft 风格管理工具

**还需要自己完成**：不自带 Office 编辑器、实时协作服务或文档存储

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：社区 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://storybooks.fluentui.dev/react/llms.txt)

**参考链接**：[项目介绍](https://react.fluentui.dev/) · [源码与许可](https://github.com/microsoft/fluentui) · [MCP 接入说明](https://github.com/blendsdk/fluentui-mcp) · [官方 LLM 文档](https://storybooks.fluentui.dev/react/llms.txt) · [官方 README](https://raw.githubusercontent.com/microsoft/fluentui/HEAD/README.md)


## 11. Blueprint


[官网](https://blueprintjs.com/) · React · **免费**

![Blueprint](assets/11.webp)

Blueprint 是偏桌面数据工具的 React UI 库，默认风格紧凑，适合需要同时展示大量信息的专业界面。它更像分析工作台的底座，而非营销页面模板。

### 主要特点

- 弹出层、菜单、树、表格和表单有较强的桌面应用取向。
- 暗色主题适合配合密集的数据分析界面。
- 适合运营、监控和研究工具；移动端布局与品牌化外观需要额外调整。

**适合用来做**：数据分析控制台；监控运维台；专业研究/标注工具

**还需要自己完成**：手机优先社区或电商不是首选场景；大图与图表引擎另接

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：官方 AI 文档可公开读取；没有明确的专用 MCP 入口。

[AI 文档](https://raw.githubusercontent.com/palantir/blueprint/develop/llms.txt)

**参考链接**：[项目介绍](https://blueprintjs.com/) · [源码与许可](https://github.com/palantir/blueprint) · [官方 LLM 文档](https://raw.githubusercontent.com/palantir/blueprint/develop/llms.txt) · [官方 README](https://raw.githubusercontent.com/palantir/blueprint/HEAD/README.md)


## 12. Grommet


[官网](https://v2.grommet.io/) · React · **免费**

![Grommet](assets/12.webp)

Grommet 把布局、主题和可访问性放在同一套 React 组件体系里，适合用统一结构组织应用页面。整体风格相对简洁，便于通过主题变化形成自己的产品外观。

### 主要特点

- Box、Grid 等布局组件与表单、导航组件可以共同使用。
- 主题对象集中管理颜色、间距和组件表现。
- 适合管理平台和响应式产品；业务特定的复杂控件仍可能需要补充。

**适合用来做**：设备状态仪表盘；企业门户；内部服务管理工具

**还需要自己完成**：设备协议、实时流和告警规则均是业务层工作

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://v2.grommet.io/) · [源码与许可](https://github.com/grommet/grommet) · [官方 README](https://raw.githubusercontent.com/grommet/grommet/HEAD/README.md)


## 13. Evergreen


[官网](https://evergreen.segment.com/) · React · **免费**

![Evergreen](assets/13.webp)

Evergreen 是 Segment 发布的 React UI 框架，偏向桌面业务工具的实用风格。可以用来参考后台控件和页面结构，接入前应检查它与现有 React 环境的兼容性。

### 主要特点

- 按钮、表单、表格和侧边面板等适合组合管理界面。
- 提供默认样式和主题能力，适合快速统一基础控件。
- 更适合已有 Evergreen 项目的延续或设计参考；新项目需要评估维护与依赖情况。

**适合用来做**：已有 Evergreen 的管理后台续建；内部运营小工具

**还需要自己完成**：新项目仅列候选，先核查发布节奏与当前 React 兼容性

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://evergreen.segment.com/) · [源码与许可](https://github.com/segmentio/evergreen) · [官方 README](https://raw.githubusercontent.com/segmentio/evergreen/HEAD/README.md)


## 14. React Bootstrap


[官网](https://react-bootstrap.github.io/) · React · **免费**

![React Bootstrap](assets/14.webp)

把 Bootstrap 的常见交互组件做成 React 组件，适合熟悉 Bootstrap 布局和样式、又希望以 React 管理状态的团队。

### 主要特点

- 保留 Bootstrap 的网格与视觉习惯，迁移既有页面比较直观。
- 交互由 React 组件控制，无需再依赖 Bootstrap 的 jQuery 插件。
- 适合传统网站、后台和渐进改造；需要自行引入与组件版本对应的 Bootstrap 样式。

**适合用来做**：已有 Bootstrap 网站改造为 React；商户后台；内容管理页

**还需要自己完成**：适合渐进改造；不是追求完全新视觉时的唯一选择

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://react-bootstrap.github.io/) · [源码与许可](https://github.com/react-bootstrap/react-bootstrap) · [官方 README](https://raw.githubusercontent.com/react-bootstrap/react-bootstrap/HEAD/README.md)


## 15. Semantic UI React


[官网](https://react.semantic-ui.com/) · React · **免费**

![Semantic UI React](assets/15.webp)

Semantic UI 的 React 组件实现，以语义化属性组合控件。适合已有 Semantic UI 视觉体系的应用，也可用来研究经典网站与后台的组件组织方式。

### 主要特点

- 通过属性配置尺寸、颜色、状态和子组件，阅读结构比较直观。
- 表单、菜单、消息和卡片有一致的传统 Web 风格。
- 通常还需要单独引入样式；新项目应先确认 React 版本和维护状态是否合适。

**适合用来做**：既有 Semantic UI React 产品维护；原型页面复用

**还需要自己完成**：不作新项目默认推荐，先核查 React 版本与维护状态

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://react.semantic-ui.com/) · [源码与许可](https://github.com/Semantic-Org/Semantic-UI-React) · [官方 README](https://raw.githubusercontent.com/Semantic-Org/Semantic-UI-React/HEAD/README.md)


## 16. Radix Themes


[官网](https://www.radix-ui.com/themes) · React · **免费**

![Radix Themes](assets/16.webp)

Radix Themes 在 Radix 的交互基础上提供现成视觉样式，适合想要简洁、精细的产品界面，又不想从零设计每个控件的 React 项目。

### 主要特点

- 通过主题参数统一强调色、灰阶、圆角、缩放和面板外观。
- 布局、排版与常见交互组件可以沿用同一套视觉语言。
- 比无样式原语更快上手；要做完全自由的视觉结构，可能需要回到底层 Primitives。

**适合用来做**：简洁 SaaS 工作台；知识管理工具；订阅/账号设置页

**还需要自己完成**：复杂编辑器、知识图谱和协作同步仍需专门模块

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：社区 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

**参考链接**：[项目介绍](https://www.radix-ui.com/themes) · [源码与许可](https://github.com/radix-ui/themes) · [MCP 接入说明](https://github.com/gianpieropuleo/radix-mcp-server) · [官方 README](https://raw.githubusercontent.com/radix-ui/themes/HEAD/README.md)


## 17. Tamagui


[官网](https://tamagui.dev/) · React / React Native · **免费 + 付费**

![Tamagui](assets/17.webp)

Tamagui 面向 React Native 与 Web，尝试用共享组件和主题组织跨端产品。适合同时考虑网页与移动应用、希望复用设计语言的团队。

### 主要特点

- 组件、样式系统与主题围绕跨端复用设计，不只是给网页套一个移动壳。
- 编译器可处理部分样式计算，但性能收益取决于项目结构与配置。
- 适合跨端产品底座；原生权限、导航和平台特有交互仍需分别处理。

**适合用来做**：同一产品的 iPhone/Android App + Web 账号中心；会员服务；习惯记录

**还需要自己完成**：跨端不等于每个界面原样共享；导航、设备能力和交互需平台适配

### 免费与付费

**免费部分**：Tamagui 核心组件和样式系统免费；Takeout 有免费版本。

**付费及其他费用**：Takeout Pro、Bento 等商业资源按各自许可购买。

**动画开发基础**：跨端动画 / 弹簧过渡。通过动画驱动器配置组件状态变化和进出场表现。可以用于 Web 与 React Native 的共享设计，但动画细节需要按目标平台配置。 [看官方动效](https://tamagui.dev/docs/core/animations)

### AI 接入

**MCP**：社区 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://tamagui.dev/llms.txt)

**参考链接**：[项目介绍](https://tamagui.dev/) · [源码与许可](https://github.com/tamagui/tamagui) · [免费与付费范围](https://tamagui.dev/takeout) · [MCP 接入说明](https://github.com/JMRMEDEV/tamagui-mcp-server-community) · [官方 LLM 文档](https://tamagui.dev/llms.txt) · [官方 README](https://raw.githubusercontent.com/tamagui/tamagui/HEAD/README.md)


## 18. shadcn/ui


[官网](https://ui.shadcn.com/) · React · **免费**

![shadcn/ui](assets/18.webp)

shadcn/ui 把组件源码交给项目维护，而不是只安装一个封装好的组件包。你可以直接修改外观和行为，适合希望长期掌控设计系统的 React 产品。

### 主要特点

- 通过 CLI 或 registry 把需要的组件加入自己的代码库。
- 通常结合 Tailwind 与交互原语，便于改造表单、导航和数据展示。
- 自由度高，但更新、代码合并和自定义后的维护也由项目承担。

**适合用来做**：高度定制的 SaaS；AI 聊天/工作台外框；任务看板的卡片和详情面板

**还需要自己完成**：任务拖拽、聊天连接、编辑器和数据模型另做；自行管理源码升级

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：shadcn registry MCP 工具本身可免费使用；访问收费 registry 或 Pro 资源仍需对应授权。

[AI 文档](https://ui.shadcn.com/llms.txt)

[Skills 指南](https://ui.shadcn.com/docs/skills)

**参考链接**：[项目介绍](https://ui.shadcn.com/) · [源码与许可](https://github.com/shadcn-ui/ui) · [MCP 接入说明](https://ui.shadcn.com/docs/mcp) · [官方 LLM 文档](https://ui.shadcn.com/llms.txt) · [官方 AI 工作流 / Skills](https://ui.shadcn.com/docs/skills) · [官方 README](https://raw.githubusercontent.com/shadcn-ui/ui/HEAD/README.md)


## 19. Radix Primitives


[官网](https://www.radix-ui.com/primitives) · React · **免费**

![Radix Primitives](assets/19.webp)

Radix Primitives 提供 React 的底层交互部件，重点是键盘操作、焦点管理和可访问性。外观基本由你决定，适合搭建自己的品牌组件系统。

### 主要特点

- Dialog、Popover、Select 等处理难写的交互细节。
- 无样式结构便于配合自有 CSS 或不同样式工具。
- 适合需要精细控制视觉的团队；它不提供完整后台模板或现成品牌设计。

**适合用来做**：自有品牌组件系统；复杂下拉/弹层；多产品统一交互底座

**还需要自己完成**：不适合期望安装后立即得到完整后台皮肤的团队

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：社区 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

**参考链接**：[项目介绍](https://www.radix-ui.com/primitives) · [源码与许可](https://github.com/radix-ui/primitives) · [MCP 接入说明](https://github.com/effinrich/forgekit-radix-mcp) · [官方 README](https://raw.githubusercontent.com/radix-ui/primitives/HEAD/README.md)


## 20. Base UI


[官网](https://base-ui.com/) · React · **免费**

![Base UI](assets/20.webp)

Base UI 是 React 的无样式组件基础，适合把可靠的交互行为与自己的设计语言结合。它提供组件逻辑和结构，视觉部分由项目自己实现。

### 主要特点

- 表单控件、菜单和弹层可以按需求组合，不强制使用 Material 外观。
- 兼顾焦点、键盘与可访问性行为，减少重复写底层逻辑。
- 适合自建设计系统；需要额外完成样式、主题和业务页面。

**适合用来做**：公司级 React 设计系统；强品牌消费产品；自定义表单界面

**还需要自己完成**：需要补齐 CSS、设计令牌及业务组件，不是整套视觉模板

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：社区 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://base-ui.com/llms.txt)

**参考链接**：[项目介绍](https://base-ui.com/) · [源码与许可](https://github.com/mui/base-ui) · [MCP 接入说明](https://github.com/polvallverdu/base-ui-mcp) · [官方 LLM 文档](https://base-ui.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/mui/base-ui/HEAD/README.md)


## 21. Headless UI


[官网](https://headlessui.com/) · React / Vue · **免费 + 付费**

![Headless UI](assets/21.webp)

Headless UI 是 Tailwind 团队维护的无样式交互组件，支持 React 与 Vue。适合已经使用 Tailwind、希望自行决定外观但保留现成交互逻辑的项目。

### 主要特点

- 菜单、对话框、列表框等提供状态与键盘交互。
- 可以用 Tailwind 类或自有 CSS 设计完全不同的视觉。
- 组件种类相对聚焦，需要配合布局、图表和其他业务控件。

**适合用来做**：定制官网导航；登录注册弹层；小型 SaaS 的选择与弹窗模块

**还需要自己完成**：不以复杂表格和图表全套覆盖见长，需要按具体模块配库

### 免费与付费

**免费部分**：Headless UI 的 React / Vue 交互组件免费。

**付费及其他费用**：同团队的 Tailwind Plus 成品区块和模板另售，不是使用 Headless UI 的必要条件。

**含动画组件**：进出场 / 弹层过渡。Transition 能把显示状态与 CSS 动画连接起来，适合菜单、弹窗和面板的进入退出。需要自己定义具体的动画样式。 [看官方动效](https://headlessui.com/react/transition)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://headlessui.com/) · [源码与许可](https://github.com/tailwindlabs/headlessui) · [免费与付费范围](https://tailwindcss.com/plus) · [官方 README](https://raw.githubusercontent.com/tailwindlabs/headlessui/HEAD/README.md)


## 22. React Aria


[官网](https://react-spectrum.adobe.com/react-aria/) · React · **免费**

![React Aria](assets/22.webp)

React Aria 来自 Adobe，重点是可访问性、交互和国际化，适合对键盘操作、屏幕阅读器和多语言体验要求较高的产品。

### 主要特点

- 既有 Hooks，也有更容易组合的 React Aria Components。
- 日期、选择、集合等复杂交互可在自定义样式下复用。
- 适合自建设计系统与专业应用；无样式能力不等于已经完成视觉设计或整站无障碍验收。

**适合用来做**：重视键盘操作与国际化的业务系统；公共服务表单；自建设计系统

**还需要自己完成**：采用后仍需真实无障碍验收，不能把库声明当作整个产品合规证明

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://react-aria.adobe.com/llms.txt)

[Skills 指南](https://react-aria.adobe.com/ai)

**参考链接**：[项目介绍](https://react-spectrum.adobe.com/react-aria/) · [源码与许可](https://github.com/adobe/react-spectrum) · [MCP 接入说明](https://react-aria.adobe.com/ai) · [官方 LLM 文档](https://react-aria.adobe.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/adobe/react-spectrum/HEAD/README.md)


## 23. Ark UI


[官网](https://ark-ui.com/) · React / Vue / Solid / Svelte · **免费**

![Ark UI](assets/23.webp)

Ark UI 提供基于状态机的无样式组件，支持多个前端框架。适合希望在不同技术栈中保持相似交互逻辑，又要自行控制外观的团队。

### 主要特点

- 把组件行为与视觉分开，便于接入自有主题和样式工具。
- 多框架实现围绕相近的组件概念组织，方便团队迁移理解。
- 适合设计系统基础；复制示例时要选对 React、Vue、Solid 或 Svelte 版本。

**适合用来做**：React/Vue/Svelte 多团队共享交互规范；自定义组件平台

**还需要自己完成**：不是将同一份 JSX 自动转换为 Vue/Svelte，也不包含后端

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://ark-ui.com/llms.txt)

**参考链接**：[项目介绍](https://ark-ui.com/) · [源码与许可](https://github.com/chakra-ui/ark) · [MCP 接入说明](https://ark-ui.com/docs/ai/mcp-server) · [官方 LLM 文档](https://ark-ui.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/README.md)


## 24. Park UI


[官网](https://park-ui.com/) · React / Solid · **免费**

![Park UI](assets/24.webp)

Park UI 在 Ark UI 的交互基础上提供可使用的设计风格，适合想要精简、统一外观，同时又希望能修改组件源码的项目。

### 主要特点

- 基于无样式原语构建，保留较细的组件组合能力。
- 围绕主题和样式规则组织，适合形成自己的组件系统。
- 要按所选版本匹配 Panda CSS 等依赖与框架，不能直接当成所有项目的即插即用主题。

**适合用来做**：有设计团队的 SaaS；React/Solid 自定义工作台

**还需要自己完成**：需要接受该样式与源码体系，不是往任意旧项目零配置粘贴

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://park-ui.com/) · [源码与许可](https://github.com/chakra-ui/park-ui) · [社区 MCP 检索线索（待核验）](https://www.npmjs.com/package/park-ui-mcp-server) · [官方 README](https://raw.githubusercontent.com/chakra-ui/park-ui/HEAD/README.md)


## 25. Element Plus


[官网](https://element-plus.org/en-US/) · Vue · **免费**

![Element Plus](assets/25.webp)

Element Plus 面向 Vue 3，是企业后台常见的一套完整组件方案。表单、表格、树和弹窗等控件使用方式一致，适合快速组织数据管理页面。

### 主要特点

- 业务表单与数据展示覆盖面广，适合后台 CRUD、筛选和配置。
- 主题变量与国际化能力便于统一品牌和语言。
- 适合管理后台；个性化营销页或移动原生体验不是它的主要方向。

**适合用来做**：Vue 3 ERP；员工/客户管理；活动报名管理后台

**还需要自己完成**：任务看板拖拽、订单流程、预约冲突处理需另实现

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：社区 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://element-plus.org/llms.txt)

**参考链接**：[项目介绍](https://element-plus.org/en-US/) · [源码与许可](https://github.com/element-plus/element-plus) · [MCP 接入说明](https://github.com/yinxianwei/element-plus-mcp) · [官方 LLM 文档](https://element-plus.org/llms.txt) · [官方 README](https://raw.githubusercontent.com/element-plus/element-plus/HEAD/README.md)


## 26. Naive UI


[官网](https://www.naiveui.com/en-US/os-theme/components/button) · Vue · **免费**

![Naive UI](assets/26.webp)

Naive UI 是面向 Vue 3、以 TypeScript 为基础的组件库，适合现代管理后台和工具类应用。主题配置集中，便于保持明暗模式与控件样式的一致性。

### 主要特点

- 输入、选择、表格、树、弹窗等常见业务组件齐全。
- 主题覆盖可以直接通过配置调整，不必逐个覆盖零散样式。
- 适合需要灵活主题的 Vue 产品；业务数据模型和流程依然需要自行实现。

**适合用来做**：品牌定制 Vue 管理工具；多主题数据工作台；AI 服务控制台

**还需要自己完成**：SSR 样式和大数据图表需单独集成验证

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://www.naiveui.com/en-US/os-theme/components/button) · [源码与许可](https://github.com/tusen-ai/naive-ui) · [官方 README](https://raw.githubusercontent.com/tusen-ai/naive-ui/HEAD/README.md)


## 27. PrimeVue


[官网](https://primevue.org/) · Vue · **有条件免费 / 付费**

![PrimeVue](assets/27.webp)

PrimeVue 是 Prime 家族的 Vue 组件套件，适合表格、筛选和多种输入控件较多的应用。提供不同层级的样式与组合能力，可以从现成主题逐步过渡到自定义。

### 主要特点

- 数据表、树、菜单和表单能覆盖大量后台场景。
- 设计令牌与组件样式配置便于统一视觉，而不只套一张页面模板。
- v4 及以前的 MIT 版本与新版授权不同，新项目和升级项目应分别选择。

**适合用来做**：Vue 库存订单系统；数据分析后台；企业服务平台

**还需要自己完成**：数据分析算法与报表导出服务另做，高级周边授权另查

### 免费与付费

**免费部分**：PrimeVue v4 及此前已发布的 MIT 版本仍可免费使用。新版 Community 对符合资格的个人与小型组织免费。

**付费及其他费用**：新版超出 Community 资格的组织需要商业授权；Pro 组件、模板、设计工具与高级支持也另有收费。

组织须同时满足：开发者少于 5 人、员工少于 10 人、年收入低于 100 万美元、外部融资不超过许可规定的 300 万美元门槛。Community 需注册，并每年确认资格续期。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：MCP 包含在 PrimeUI 授权内；符合 Community 资格可随免费方案使用，否则按商业授权。

**参考链接**：[项目介绍](https://primevue.org/) · [源码与许可](https://github.com/primefaces/primevue) · [方案与收费](https://primeui.dev/pricing) · [Community 免费资格](https://primeui.dev/licenses/community) · [旧版 MIT 范围](https://primeui.dev/security) · [MCP 接入说明](https://primevue.dev/mcp/) · [官方 README](https://raw.githubusercontent.com/primefaces/primevue/HEAD/README.md)


## 28. Vuetify


[官网](https://vuetifyjs.com/en/) · Vue · **免费 + 付费**

![Vuetify](assets/28.webp)

Vuetify 把 Material Design 体系带到 Vue，适合希望界面保持明确视觉规范的应用。组件、布局和主题共同工作，能较快形成完整产品外观。

### 主要特点

- 网格、导航、表单与数据展示围绕统一设计语言组织。
- 主题令牌和明暗模式适合长期维护多页面应用。
- 适合业务系统和工具产品；商店模板与核心组件的许可需要分开看。

**适合用来做**：Material 风格 Vue 管理平台；会员中心；内部服务 App 网页端

**还需要自己完成**：不要将 Vue 网页组件当作 iOS 原生控件

### 免费与付费

**免费部分**：Vuetify 核心组件免费；商店也有免费主题与设计资源。

**付费及其他费用**：部分商店模板、商业用途授权及附加服务收费，按具体资源选择。

**含动画组件**：淡入 / 缩放 / 展开。内置多种过渡组件，可用于内容展开、视图切换和控件进出场。适合保持 Material 风格的应用动效。 [看官方动效](https://vuetifyjs.com/en/styles/transitions/)

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：公开文档 MCP 无需登录；Vuetify One 等账户关联入口另需认证。

[AI 文档](https://vuetifyjs.com/llms.txt)

**参考链接**：[项目介绍](https://vuetifyjs.com/en/) · [源码与许可](https://github.com/vuetifyjs/vuetify) · [免费与付费范围](https://store.vuetifyjs.com/pages/licensing-information) · [MCP 接入说明](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) · [官方 LLM 文档](https://vuetifyjs.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/README.md)


## 29. Quasar


[官网](https://quasar.dev/) · Vue · **免费**

![Quasar](assets/29.webp)

Quasar 不只是 Vue 组件库，也提供应用构建工具链。适合希望用 Vue 同时覆盖 Web、PWA，以及基于容器的移动或桌面应用的项目。

### 主要特点

- 组件与 CLI、构建模式配套，减少跨平台工程配置的起点工作。
- 同一产品可面向多个发布目标，但各平台仍有自己的能力边界。
- 适合应用型产品；平台插件、原生能力和商店发布需要额外处理。

**适合用来做**：商户管理多端应用；巡检/录入工具；需要 Web/PWA/移动封装的 Vue 产品

**还需要自己完成**：移动封装仍是 Web 路线；相机、离线同步等业务需额外集成

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：社区 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://quasar.dev/llms.txt)

**参考链接**：[项目介绍](https://quasar.dev/) · [源码与许可](https://github.com/quasarframework/quasar) · [MCP 接入说明](https://github.com/aliaks-ei/quasar-docs-mcp) · [官方 LLM 文档](https://quasar.dev/llms.txt) · [官方 README](https://raw.githubusercontent.com/quasarframework/quasar/HEAD/README.md)


## 30. Nuxt UI


[官网](https://ui.nuxt.com/) · Vue / Nuxt · **免费**

![Nuxt UI](assets/30.webp)

Nuxt UI 是面向 Vue 与 Nuxt 的完整组件体系，结合 Tailwind、交互原语和设计令牌。既能做应用后台，也能组织内容站和产品官网。

### 主要特点

- 基础控件、页面布局和应用组件可以使用同一套主题。
- 可用于 Nuxt，也有纯 Vue 项目的接入方式。
- v4 已合并原 Pro 能力并采用 MIT，不能沿用旧版“UI Pro 必须购买”的印象。

**适合用来做**：Nuxt 内容网站 + 会员中心；文档站 + SaaS 控制台；SEO 导向产品官网

**还需要自己完成**：会员权限、订阅和数据库不是 UI 库自带业务功能

### 免费与付费

**免费部分**：Nuxt UI v4（含原 UI Pro 合并的组件）采用 MIT，可免费使用。

**付费及其他费用**：使用当前组件库本身无需购买旧版 UI Pro 授权。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://ui.nuxt.com/llms.txt)

[Skills 指南](https://ui.nuxt.com/llms.txt)

**参考链接**：[项目介绍](https://ui.nuxt.com/) · [源码与许可](https://github.com/nuxt/ui) · [Nuxt UI v4](https://ui.nuxt.com/docs/getting-started/migration/v4) · [MCP 接入说明](https://ui.nuxt.com/docs/getting-started/ai/mcp) · [官方 LLM 文档](https://ui.nuxt.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/nuxt/ui/HEAD/README.md)


## 31. Ant Design Vue


[官网](https://antdv.com/components/overview) · Vue · **免费**

![Ant Design Vue](assets/31.webp)

Ant Design Vue 把 Ant Design 的企业产品语言带到 Vue，适合以表格、表单和操作流程为主的中后台应用。

### 主要特点

- 数据录入、导航、反馈和展示控件风格统一。
- 主题与国际化配置便于搭建跨页面管理系统。
- 它是独立的 Vue 实现，版本和 API 不应照搬 React Ant Design 文档。

**适合用来做**：Vue CRM；审批工单；Ant Design 风格运营后台

**还需要自己完成**：不能直接混入 React 版本组件，拖拽排程和权限另做

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：社区 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

**参考链接**：[项目介绍](https://antdv.com/components/overview) · [源码与许可](https://github.com/vueComponent/ant-design-vue) · [MCP 接入说明](https://github.com/yyues/antdv-mcp) · [官方 README](https://raw.githubusercontent.com/vueComponent/ant-design-vue/HEAD/README.md)


## 32. Arco Design Vue


[官网](https://arco.design/vue/en-US/component/button) · Vue · **免费**

![Arco Design Vue](assets/32.webp)

Arco Design Vue 提供面向企业应用的 Vue 组件与设计体系。适合需要较完整后台控件，同时希望统一品牌和交互细节的项目。

### 主要特点

- 表单、表格、弹层和树等控件能组合复杂业务页面。
- 主题相关工具支持对组件视觉进行集中调整。
- 适合运营与管理平台；React 示例不一定能直接迁移到 Vue 版本。

**适合用来做**：Vue 企业控制台；多模块业务后台；运营配置平台

**还需要自己完成**：维护节奏与 React 版分开判断；不是 React API 的替换包

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://arco.design/vue/en-US/component/button) · [源码与许可](https://github.com/arco-design/arco-design-vue) · [官方 README](https://raw.githubusercontent.com/arco-design/arco-design-vue/HEAD/README.md)


## 33. Vant


[官网](https://vant-ui.github.io/vant/) · Vue / 移动 Web · **免费**

![Vant](assets/33.webp)

Vant 是面向移动 Web 的 Vue 组件库，重点是触屏表单、列表、弹层与业务控件。适合手机浏览器、H5 活动页和嵌入式网页。

### 主要特点

- 动作面板、日期选择、下拉刷新和列表等更贴近移动操作。
- 商品、地址、优惠券等组件可用于电商类界面的起点。
- 它运行在 Web 页面中，不是原生 iOS 或 Android 控件库。

**适合用来做**：手机网页预约报名；H5 商城；微信内活动页与用户中心

**还需要自己完成**：这是移动 Web，不是 SwiftUI/React Native；支付和 WebView 桥接另做

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://vant-ui.github.io/vant/) · [源码与许可](https://github.com/youzan/vant) · [官方 README](https://raw.githubusercontent.com/youzan/vant/HEAD/README.md)


## 34. TDesign Vue Next


[官网](https://tdesign.tencent.com/vue-next/overview) · Vue · **免费**

![TDesign Vue Next](assets/34.webp)

TDesign Vue Next 是腾讯 TDesign 的 Vue 3 实现，面向企业应用的一致设计与研发。适合要在团队内部统一控件与交互规范的产品。

### 主要特点

- 常见数据展示、输入、导航与反馈都有成套组件。
- 设计令牌与主题定制可以落到具体组件样式。
- 适合管理平台；TDesign 不同框架和移动版本需要分别接入。

**适合用来做**：Vue 3 企业后台；管理门户；腾讯风格内部工具

**还需要自己完成**：业务规则与权限模型独立实现；注意对应 Vue 3 版本

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

**参考链接**：[项目介绍](https://tdesign.tencent.com/vue-next/overview) · [源码与许可](https://github.com/Tencent/tdesign-vue-next) · [MCP 接入说明](https://tdesign.tencent.com/vue-next/mcp) · [官方 README](https://raw.githubusercontent.com/Tencent/tdesign-vue-next/HEAD/README.md)


## 35. shadcn-vue


[官网](https://www.shadcn-vue.com/) · Vue · **免费**

![shadcn-vue](assets/35.webp)

shadcn-vue 将可复制源码的组件组织方式带到 Vue，适合想用现成基础又要掌控每个细节的团队。

### 主要特点

- 通过 CLI 与 registry 把组件加入自己的代码库。
- 结合 Vue 交互原语与 Tailwind，可逐步形成自己的设计系统。
- 适合品牌化应用；需要自行维护已修改的组件，并使用 Vue 专用示例。

**适合用来做**：Vue 品牌化 SaaS；自定义任务工作台；账号设置中心

**还需要自己完成**：任务拖拽和数据同步另做，源码升级需自己合并

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：官方推荐 Registry MCP

**MCP / AI 费用**：shadcn registry MCP 工具本身可免费使用；访问收费 registry 或 Pro 资源仍需对应授权。

[AI 文档](https://www.shadcn-vue.com/llms.txt)

[Skills 指南](https://www.shadcn-vue.com/docs/skills)

**参考链接**：[项目介绍](https://www.shadcn-vue.com/) · [源码与许可](https://github.com/unovue/shadcn-vue) · [MCP 接入说明](https://www.shadcn-vue.com/docs/mcp) · [官方 LLM 文档](https://www.shadcn-vue.com/llms.txt) · [官方 AI 工作流 / Skills](https://www.shadcn-vue.com/docs/skills) · [官方 README](https://raw.githubusercontent.com/unovue/shadcn-vue/HEAD/README.md)


## 36. Reka UI


[官网](https://reka-ui.com/) · Vue · **免费**

![Reka UI](assets/36.webp)

Reka UI 是 Vue 的无样式交互组件基础，前身为 Radix Vue。适合从底层搭建自己的组件系统，同时复用键盘、焦点和状态行为。

### 主要特点

- 对话框、下拉、选择器等复杂交互被拆成可组合部件。
- 外观不被预设主题绑定，能配合不同 CSS 方案。
- 适合设计系统与源码组件库；仍需自己完成品牌样式与页面结构。

**适合用来做**：Vue 自建设计系统；自定义选择器与弹层；强品牌官网

**还需要自己完成**：需要自己写样式和业务组合，不是现成网站模板

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：官方 AI 文档可公开读取；没有明确的专用 MCP 入口。

[AI 文档](https://reka-ui.com/llms.txt)

**参考链接**：[项目介绍](https://reka-ui.com/) · [源码与许可](https://github.com/unovue/reka-ui) · [官方 LLM 文档](https://reka-ui.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/unovue/reka-ui/HEAD/README.md)


## 37. Skeleton


[官网](https://www.skeleton.dev/) · React / Svelte；其他框架可用 CSS 层 · **免费**

![Skeleton](assets/37.webp)

Skeleton 结合 Tailwind 的样式工具、主题和组件，适合希望应用快速获得统一视觉的项目。不同大版本的框架支持和 API 有明显差异。

### 主要特点

- 主题与设计令牌用于统一配色、排版和控件外观。
- 在支持的框架中提供交互组件，配合 CSS 工具组织页面。
- 适合 Svelte 等对应版本的应用；升级时先确认框架支持和组件迁移方式。

**适合用来做**：React/Svelte 多主题工具；SvelteKit 会员应用；统一 Tailwind 视觉的产品群

**还需要自己完成**：功能组件只按当前 React/Svelte 支持判断，其他框架不是同等覆盖

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：官方 AI 文档可公开读取；没有明确的专用 MCP 入口。

[AI 文档](https://www.skeleton.dev/llms.txt)

**参考链接**：[项目介绍](https://www.skeleton.dev/) · [源码与许可](https://github.com/skeletonlabs/skeleton) · [官方 LLM 文档](https://www.skeleton.dev/llms.txt) · [官方 README](https://raw.githubusercontent.com/skeletonlabs/skeleton/HEAD/README.md)


## 38. shadcn-svelte


[官网](https://www.shadcn-svelte.com/) · Svelte · **免费**

![shadcn-svelte](assets/38.webp)

shadcn-svelte 把源码组件模式带到 Svelte，适合想要简洁成套的视觉基础，又能直接修改组件代码的产品。

### 主要特点

- 通过 registry 安装所需组件，源码保存在项目内。
- 配合 Svelte 交互原语与 Tailwind，可自行调整结构和样式。
- 适合定制应用界面；需留意 Svelte、Tailwind 与底层组件版本的组合。

**适合用来做**：SvelteKit SaaS；知识工具；设置和订阅管理界面

**还需要自己完成**：业务数据、权限、复杂编辑器需另配，更新差异由项目维护

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：社区 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://www.shadcn-svelte.com/llms.txt)

**参考链接**：[项目介绍](https://www.shadcn-svelte.com/) · [源码与许可](https://github.com/huntabyte/shadcn-svelte) · [MCP 接入说明](https://github.com/michael-obele/shadcn-svelte-mcp) · [官方 LLM 文档](https://www.shadcn-svelte.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/huntabyte/shadcn-svelte/HEAD/README.md)


## 39. Bits UI


[官网](https://bits-ui.com/) · Svelte · **免费**

![Bits UI](assets/39.webp)

Bits UI 是面向 Svelte 的无样式组件基础，专注交互逻辑和可访问性。适合自建设计系统，或者给现有组件补上可靠的行为。

### 主要特点

- 把菜单、对话框和选择器等拆成可组合部件。
- 外观交由项目处理，可以融入不同设计风格。
- 适合细致定制；它不提供完整主题或现成业务页面。

**适合用来做**：Svelte 自有组件体系；自定义弹窗、菜单和复杂表单

**还需要自己完成**：只做一个普通页面且没设计资源时，投入可能大于成品库

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：官方 AI 文档可公开读取；没有明确的专用 MCP 入口。

[AI 文档](https://bits-ui.com/llms.txt)

**参考链接**：[项目介绍](https://bits-ui.com/) · [源码与许可](https://github.com/huntabyte/bits-ui) · [官方 LLM 文档](https://bits-ui.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/huntabyte/bits-ui/HEAD/README.md)


## 40. Melt UI


[官网](https://melt-ui.com/) · Svelte · **免费**

![Melt UI](assets/40.webp)

Melt UI 用更接近行为构建器的方式组织 Svelte 交互能力，适合想保留 HTML 结构自由度的开发方式。

### 主要特点

- 把控件行为连接到自定义元素，而不是强制固定的完整外观。
- 可以围绕状态与属性构建自己的组件封装。
- 适合定制组件系统；不同版本的 builder API 与使用示例需要对应。

**适合用来做**：Svelte 创意交互界面；需要自定义标记结构的组件平台

**还需要自己完成**：不是现成后台套件，视觉与组件封装工作更多

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://melt-ui.com/) · [源码与许可](https://github.com/melt-ui/melt-ui) · [官方 README](https://raw.githubusercontent.com/melt-ui/melt-ui/HEAD/README.md)


## 41. Flowbite Svelte


[官网](https://flowbite-svelte.com/) · Svelte · **免费 + 付费**

![Flowbite Svelte](assets/41.webp)

Flowbite Svelte 是 Flowbite 在 Svelte 生态的组件实现，适合已使用 Tailwind 的页面与应用。视觉和常见界面模式可以保持一致。

### 主要特点

- 按钮、表单、导航和弹层等以 Svelte 组件形式使用。
- Tailwind 类与主题支持便于调整布局和品牌风格。
- 免费组件与付费 Blocks 分开；购买时还要确认资源是否提供 Svelte 版本。

**适合用来做**：Svelte 管理面板；活动网站；内容管理与会员页面

**还需要自己完成**：需要检查 Svelte 大版本，避免同时初始化原生 Flowbite JS

### 免费与付费

**免费部分**：Flowbite Svelte 核心组件采用 MIT，免费使用。

**付费及其他费用**：Flowbite 品牌的 Pro 区块和模板另售；购买前要确认具体资源是否提供 Svelte 版本。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

**参考链接**：[项目介绍](https://flowbite-svelte.com/) · [源码与许可](https://github.com/themesberg/flowbite-svelte) · [免费与付费范围](https://flowbite.com/pro/) · [MCP 接入说明](https://flowbite-svelte.com/docs/mcp/overview) · [官方 README](https://raw.githubusercontent.com/themesberg/flowbite-svelte/HEAD/README.md)


## 42. SvelteUI


[官网](https://www.svelteui.org/) · Svelte · **免费**

![SvelteUI](assets/42.webp)

SvelteUI 提供带样式的 Svelte 组件和工具，适合快速搭建统一的表单与应用页面，也可用于研究组件结构。

### 主要特点

- 基础控件、布局和主题能够减少从零编写样式的工作。
- 使用方式围绕 Svelte 组件组织，便于融入对应版本的项目。
- 新项目应先确认维护情况和 Svelte 版本支持，不要直接假设兼容最新语法。

**适合用来做**：既有 SvelteUI 工具继续维护；功能探索原型

**还需要自己完成**：新项目先做版本与维护筛选，不因组件数量直接推荐

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://www.svelteui.org/) · [源码与许可](https://github.com/svelteuidev/svelteui) · [官方 README](https://raw.githubusercontent.com/svelteuidev/svelteui/HEAD/README.md)


## 43. Angular Material


[官网](https://material.angular.dev/) · Angular · **免费**

![Angular Material](assets/43.webp)

Angular Material 是 Angular 官方的 Material Design 组件实现，适合采用 Angular 并希望沿用成熟视觉规范的应用。

### 主要特点

- 表单、表格、导航和弹窗与 Angular 工程方式一致。
- Angular CDK 提供覆盖层、拖拽等更底层的交互工具。
- 适合业务系统；高度品牌化外观可能需要较多主题定制。

**适合用来做**：Angular 企业系统；长周期内部管理平台；组织级表单工具

**还需要自己完成**：数据看板图表、任务拖拽页面的业务与布局仍需开发

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：官方生态 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

**参考链接**：[项目介绍](https://material.angular.dev/) · [源码与许可](https://github.com/angular/components) · [MCP 接入说明](https://angular.dev/ai/mcp) · [官方 README](https://raw.githubusercontent.com/angular/components/HEAD/README.md)


## 44. PrimeNG


[官网](https://primeng.org/) · Angular · **有条件免费 / 付费**

![PrimeNG](assets/44.webp)

PrimeNG 是 Prime 家族的 Angular 组件套件，覆盖大量业务控件，适合数据输入和管理界面。主题和组件可以形成较完整的应用基础。

### 主要特点

- 表格、树、菜单与选择控件适合复杂后台页面。
- 不同主题与设计令牌支持统一品牌外观。
- v21 及以前的 MIT 版本与新版本授权分开，更新依赖前要确认免费资格或商业许可。

**适合用来做**：Angular ERP/CRM；数据报表后台；复杂业务工作台

**还需要自己完成**：需要分析数据源、权限和导出能力的项目应另设计业务层

### 免费与付费

**免费部分**：PrimeNG v21 及此前已发布的 MIT 版本仍可免费使用。新版 Community 对符合资格的个人与小型组织免费。

**付费及其他费用**：新版超出 Community 资格的组织需要商业授权；Pro 组件、模板、设计工具与高级支持也另有收费。

组织须同时满足：开发者少于 5 人、员工少于 10 人、年收入低于 100 万美元、外部融资不超过许可规定的 300 万美元门槛。Community 需注册，并每年确认资格续期。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：MCP 包含在 PrimeUI 授权内；符合 Community 资格可随免费方案使用，否则按商业授权。

[Skills 指南](https://primeng.dev/plugin)

**参考链接**：[项目介绍](https://primeng.org/) · [源码与许可](https://github.com/primefaces/primeng) · [方案与收费](https://primeui.dev/pricing) · [Community 免费资格](https://primeui.dev/licenses/community) · [旧版 MIT 范围](https://primeui.dev/security) · [MCP 接入说明](https://primeng.dev/mcp) · [官方 AI 工作流 / Skills](https://primeng.dev/plugin) · [官方 README](https://raw.githubusercontent.com/primefaces/primeng/HEAD/README.md)


## 45. NG-ZORRO


[官网](https://ng.ant.design/docs/introduce/en) · Angular · **免费**

![NG-ZORRO](assets/45.webp)

NG-ZORRO 是 Angular 生态的 Ant Design 实现，适合需要 Ant 风格后台而技术栈已经确定为 Angular 的团队。

### 主要特点

- 表格、表单、导航和反馈覆盖常见企业应用流程。
- 与 Angular 的模板、表单和依赖注入方式配合使用。
- 适合运营与管理系统；不能直接套用 React 版 Ant Design 的代码或 MCP 说明。

**适合用来做**：Angular 审批平台；运营管理；Ant Design 风格企业门户

**还需要自己完成**：不能直接复用 React/Vue 的 Ant Design 组件源码

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：官方 AI 文档可公开读取；没有明确的专用 MCP 入口。

[AI 文档](https://ng.ant.design/llms.txt)

**参考链接**：[项目介绍](https://ng.ant.design/docs/introduce/en) · [源码与许可](https://github.com/NG-ZORRO/ng-zorro-antd) · [官方 LLM 文档](https://ng.ant.design/llms.txt) · [官方 README](https://raw.githubusercontent.com/NG-ZORRO/ng-zorro-antd/HEAD/README.md)


## 46. NG Bootstrap


[官网](https://ng-bootstrap.github.io/) · Angular · **免费**

![NG Bootstrap](assets/46.webp)

NG Bootstrap 为 Angular 提供 Bootstrap 风格的交互控件，适合已有 Bootstrap 设计基础的应用。它让状态和交互留在 Angular 中管理。

### 主要特点

- 日期选择、弹窗、下拉与分页等以 Angular 组件或指令提供。
- 复用 Bootstrap CSS，无需 jQuery 交互插件。
- 适合传统网站和业务系统改造；Angular 与 Bootstrap 的版本配套要明确。

**适合用来做**：既有 Angular + Bootstrap 系统；商户管理；企业表单网站

**还需要自己完成**：优先用于技术栈匹配的项目，不适合为了它更换整个框架

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://ng-bootstrap.github.io/) · [源码与许可](https://github.com/ng-bootstrap/ng-bootstrap) · [官方 README](https://raw.githubusercontent.com/ng-bootstrap/ng-bootstrap/HEAD/README.md)


## 47. spartan/ui


[官网](https://www.spartan.ng/) · Angular · **免费**

![spartan/ui](assets/47.webp)

spartan/ui 采用可组合的底层行为与可修改的样式组件，为 Angular 项目提供源码可控的设计基础。适合希望在 Angular 中采用类似 shadcn 工作方式的团队。

### 主要特点

- Brain 负责交互，Helm 提供样式，两者可以按需要组合。
- 组件源码与 Tailwind 样式可以在项目中继续改造。
- 适合自建设计系统；需要管理生成器、组件与 Angular 版本之间的匹配。

**适合用来做**：品牌化 Angular SaaS；自建设计系统；可控源码的后台

**还需要自己完成**：升级、样式一致性和业务组合由团队负责

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[Skills 指南](https://spartan.ng/documentation/skills)

**参考链接**：[项目介绍](https://www.spartan.ng/) · [源码与许可](https://github.com/spartan-ng/spartan) · [MCP 接入说明](https://raw.githubusercontent.com/spartan-ng/spartan/main/skills/spartan/mcp.md) · [官方 AI 工作流 / Skills](https://spartan.ng/documentation/skills) · [官方 README](https://raw.githubusercontent.com/spartan-ng/spartan/HEAD/README.md)


## 48. Bootstrap


[官网](https://getbootstrap.com/) · 框架无关 · **免费 + 付费**

![Bootstrap](assets/48.webp)

Bootstrap 提供响应式网格、样式工具和常见 Web 组件，适合快速组织传统网站或后台页面。它对框架限制较少，静态 HTML 也能使用。

### 主要特点

- 网格、排版和工具类方便搭建响应式页面骨架。
- 按钮、表单和导航有一致外观，交互组件可配合其 JavaScript 使用。
- 适合快速原型和传统站点；个性化视觉通常需要调整变量或覆盖样式。

**适合用来做**：传统企业官网；服务端模板后台；常规活动报名网站

**还需要自己完成**：在 React/Vue 中避免 JS 重复控制 DOM；复杂应用需管理状态

### 免费与付费

**免费部分**：Bootstrap 核心 CSS、JavaScript 与官方示例免费。

**付费及其他费用**：官方主题市场中的成品主题可能收费，不影响免费使用核心框架。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://getbootstrap.com/) · [源码与许可](https://github.com/twbs/bootstrap) · [免费与付费范围](https://themes.getbootstrap.com/) · [官方 README](https://raw.githubusercontent.com/twbs/bootstrap/HEAD/README.md)


## 49. Bulma


[官网](https://bulma.io/) · 框架无关 · **免费**

![Bulma](assets/49.webp)

Bulma 是以 CSS 为主的响应式框架，用语义化类名组织网格、表单和常见界面元素。适合不想引入完整 JavaScript 组件体系的页面。

### 主要特点

- 布局与控件样式可以直接应用到 HTML。
- 不附带完整交互脚本，使用哪种前端框架由项目决定。
- 适合内容站和轻量界面；菜单展开、弹窗状态等行为需要自行补上。

**适合用来做**：内容展示网站；个人工具；服务端渲染的小型表单产品

**还需要自己完成**：弹窗、菜单等行为需自行补齐，不是现成应用交互系统

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://bulma.io/) · [源码与许可](https://github.com/jgthms/bulma) · [官方 README](https://raw.githubusercontent.com/jgthms/bulma/HEAD/README.md)


## 50. daisyUI


[官网](https://daisyui.com/) · Tailwind CSS / 框架无关 · **免费 + 付费**

![daisyUI](assets/50.webp)

daisyUI 在 Tailwind 之上提供按钮、卡片、表单等语义化组件类和成套主题。适合希望减少重复类名、快速形成统一视觉的 Web 页面。

### 主要特点

- 使用 btn、card 等类名组织外观，能配合不同前端框架。
- 多主题切换是主要特点，适合快速比较产品视觉方向。
- 组件库免费，Blueprint MCP 与部分模板付费；样式类本身不会完成业务交互。

**适合用来做**：多主题内部工具；快速验证 SaaS；轻量数据卡片面板

**还需要自己完成**：任务拖拽与图表不因有 Card 样式就自动具备

### 免费与付费

**免费部分**：daisyUI 核心组件、主题和公开 AI 文档免费。

**付费及其他费用**：Blueprint MCP 需要付费许可，提供订阅或终身购买；部分成品模板另外售卖。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：付费：Blueprint MCP 需要许可密钥；免费试用不等于长期免费。

[AI 文档](https://daisyui.com/llms.txt)

**参考链接**：[项目介绍](https://daisyui.com/) · [源码与许可](https://github.com/saadeghi/daisyui) · [免费与付费范围](https://daisyui.com/blueprint/) · [MCP 接入说明](https://daisyui.com/docs/mcp/) · [官方 LLM 文档](https://daisyui.com/llms.txt) · [官方 README](https://raw.githubusercontent.com/saadeghi/daisyui/HEAD/README.md)


## 51. Flowbite


[官网](https://flowbite.com/) · Tailwind CSS / JavaScript · **免费 + 付费**

![Flowbite](assets/51.webp)

Flowbite 围绕 Tailwind 提供交互组件、页面区块和设计资源，适合产品官网与常见应用界面。免费基础组件可以先用，再按需购买更完整的页面资源。

### 主要特点

- 从导航、模态框到表单和卡片，常见模式可以组合使用。
- HTML 与不同框架的集成资源需要按实际技术栈选择。
- 适合营销页与后台起点；Pro 模板和 Figma 资源拥有独立收费与许可范围。

**适合用来做**：Tailwind 内容管理后台；营销网站 + 登录区；电商管理页

**还需要自己完成**：原生 JS 版和框架封装二选一按需用，业务后端另接

### 免费与付费

**免费部分**：Flowbite 开源组件采用 MIT，Community 版免费。

**付费及其他费用**：Pro 区块、整页模板和 Designer 设计资源需要购买，不同套餐覆盖不同。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

**参考链接**：[项目介绍](https://flowbite.com/) · [源码与许可](https://github.com/themesberg/flowbite) · [免费与付费范围](https://flowbite.com/pro/) · [MCP 接入说明](https://flowbite.com/docs/getting-started/mcp/) · [官方 README](https://raw.githubusercontent.com/themesberg/flowbite/HEAD/README.md)


## 52. Preline UI


[官网](https://preline.co/) · Tailwind CSS / JavaScript · **免费 + 付费**

![Preline UI](assets/52.webp)

Preline UI 提供 Tailwind 组件、JavaScript 交互插件和页面区块，适合希望快速搭出完整页面的项目。免费库与 Pro 模板、AI 工具分开提供。

### 主要特点

- 从基础控件到后台和营销区块，适合直接参考布局与组件组合。
- 插件承担下拉、弹层等交互，框架集成时需按指南初始化。
- Pro 资源偏整页与完整模板；MCP 是托管服务，不能把资源买断等同于永久免费调用。

**适合用来做**：产品官网；商户控制台；服务端模板里的 Tailwind 网站

**还需要自己完成**：客户端切页后的交互初始化要验证，模板授权单独看

### 免费与付费

**免费部分**：Preline 的基础组件、开源插件和部分页面区块免费。

**付费及其他费用**：Pro 区块、模板、AI Prompts 等需购买；托管 MCP 的使用权益与资源下载许可分开。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：付费权益：需 API Key；Pro 当前包含截至 2027-01-01 的 MCP 使用，之后需订阅，可能有限流。

[Skills 指南](https://preline.co/docs/agent-skills.html)

**参考链接**：[项目介绍](https://preline.co/) · [源码与许可](https://github.com/htmlstreamofficial/preline) · [免费与付费范围](https://preline.co/pro/) · [MCP 接入说明](https://preline.co/docs/mcp.html) · [官方 AI 工作流 / Skills](https://preline.co/docs/agent-skills.html) · [官方 README](https://raw.githubusercontent.com/htmlstreamofficial/preline/HEAD/README.md)


## 53. Shoelace


[官网](https://shoelace.style/) · Web Components · **免费**

![Shoelace](assets/53.webp)

Shoelace 是基于 Web Components 的组件库，适合跨框架复用同一套控件。原项目已把后续发展转向 Web Awesome，更适合已有项目延续或历史方案参考。

### 主要特点

- 自定义元素可在不同框架或普通 HTML 中使用。
- 主题和 CSS 自定义属性用于调整控件外观。
- 新项目优先比较 Web Awesome；已有 Shoelace 项目应规划迁移和兼容工作。

**适合用来做**：已使用 Shoelace 的多框架网站维护与迁移

**还需要自己完成**：仓库已归档；新项目优先比较 Web Awesome，不作为首选新增依赖

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：预设动画 / 元素过渡。Animation 组件可给元素应用预设或自定义关键帧动画。适合已有 Shoelace 项目的局部效果，后续新功能需关注 Web Awesome。 [看官方动效](https://shoelace.style/components/animation)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://shoelace.style/) · [源码与许可](https://github.com/shoelace-style/shoelace) · [官方 README](https://raw.githubusercontent.com/shoelace-style/shoelace/HEAD/README.md)


## 54. Web Awesome


[官网](https://webawesome.com/) · Web Components · **免费 + 付费**

![Web Awesome](assets/54.webp)

Web Awesome 是基于 Web Components 的设计系统，也是 Shoelace 的后续方向。适合希望组件能跨框架使用，并采用统一主题、表单和交互规则的产品。

### 主要特点

- 使用自定义 HTML 元素，能接入不同框架和普通网页。
- 免费控件配合主题、CSS 工具与原生样式，形成完整基础。
- 高级日期控件、数据可视化、设计模式和 Figma 等 Pro 能力另行授权。

**适合用来做**：多个框架共存的企业门户；共享组件平台；原生 HTML 工具站

**还需要自己完成**：不是 iOS 原生组件；SSR、表单和事件与各框架的适配要验证

### 免费与付费

**免费部分**：Web Awesome 的开源基础组件免费。

**付费及其他费用**：Pro 提供额外控件、图表、数据网格、设计模式及 Figma 资源，需要付费权限。

**含动画组件**：预设动画 / 元素过渡。Animation 工具可以控制元素动画及播放状态，适合给跨框架组件加入进入、退出和强调效果。 [看官方动效](https://webawesome.com/docs/components/animation/)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：官方 AI 文档可公开读取；没有明确的专用 MCP 入口。

[AI 文档](https://webawesome.com/llms.txt)

[Skills 指南](https://webawesome.com/docs/ai/)

**参考链接**：[项目介绍](https://webawesome.com/) · [源码与许可](https://github.com/shoelace-style/webawesome) · [官方 LLM 文档](https://webawesome.com/llms.txt) · [官方 AI 工作流 / Skills](https://webawesome.com/docs/ai/) · [官方 README](https://raw.githubusercontent.com/shoelace-style/webawesome/HEAD/README.md)


## 55. UIkit


[官网](https://getuikit.com/) · 框架无关 · **免费 + 付费**

![UIkit](assets/55.webp)

UIkit 是轻量、模块化的 Web 前端框架，提供布局、样式和常见交互。适合内容站、展示网站和希望直接使用 HTML 属性组织交互的项目。

### 主要特点

- 网格、卡片、导航和排版可以组合成完整网站。
- JavaScript 组件覆盖弹窗、轮播、吸顶等网站交互。
- 核心库与 YOOtheme 商业建站产品不同，不能把后者的付费功能算进免费库。

**适合用来做**：企业官网；内容门户；传统模板网站

**还需要自己完成**：复杂状态应用需要额外架构，React/Vue 集成要管理生命周期

### 免费与付费

**免费部分**：UIkit 核心框架采用 MIT，可免费使用。

**付费及其他费用**：YOOtheme Pro 建站工具与模板是另外的商业产品，不是 UIkit 本身。

**含动画组件**：滚动触发 / 转场。提供 Animation、Transition 与 Scrollspy 等工具，适合内容随滚动进入、悬停变化和网站模块过渡。 [看官方动效](https://getuikit.com/docs/scrollspy)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://getuikit.com/) · [源码与许可](https://github.com/uikit/uikit) · [免费与付费范围](https://yootheme.com/page-builder) · [官方 README](https://raw.githubusercontent.com/uikit/uikit/HEAD/README.md)


## 56. Pico CSS


[官网](https://picocss.com/) · 框架无关 · **免费**

![Pico CSS](assets/56.webp)

Pico CSS 给语义化 HTML 提供简洁的默认外观，适合表单、文档和轻量工具。它尽量减少类名和配置，让页面先获得清晰的排版。

### 主要特点

- 常见原生元素可直接获得一致样式，适合快速做出可用页面。
- 轻量主题与明暗模式适合简单产品和内部工具。
- 它主要解决样式，不提供完整交互组件或大型后台控件。

**适合用来做**：个人数据查询页；小型内部表单；文档附属工具

**还需要自己完成**：不适合直接承担复杂 CRM、拖拽看板或高密度数据工作台

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://picocss.com/) · [源码与许可](https://github.com/picocss/pico) · [官方 README](https://raw.githubusercontent.com/picocss/pico/HEAD/README.md)


## 57. Material Web


[官网](https://material-web.dev/) · Web Components · **免费**

![Material Web](assets/57.webp)

Material Web 用 Web Components 实现 Material Design 控件，适合跨框架使用统一的 Material 外观。它更偏基础控件，而非完整应用模板。

### 主要特点

- 按钮、输入、选择等以自定义元素提供。
- 主题令牌允许调整颜色和外观，但仍保持 Material 交互语言。
- 需要评估项目维护状态与组件覆盖范围，不宜默认当作持续扩展的完整产品套件。

**适合用来做**：既有 Material Web 系统的维护与评估

**还需要自己完成**：处于维护模式，新产品应先确认长期路线；不是原生 iOS Material 库

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：社区 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

**参考链接**：[项目介绍](https://material-web.dev/) · [源码与许可](https://github.com/material-components/material-web) · [MCP 接入说明](https://github.com/shanthropic/material-web-mcp) · [官方 README](https://raw.githubusercontent.com/material-components/material-web/HEAD/README.md)


## 58. Magic UI


[官网](https://magicui.design/) · React · **免费 + 付费**

![Magic UI](assets/58.webp)

Magic UI 收集适合产品官网的 React 动效组件，重点是动态文字、背景、展示卡片和交互细节。适合给已有页面增加视觉焦点。

### 主要特点

- 提供粒子、滚动、数字变化等效果，可以按模块组合。
- 通常与 Tailwind、Motion 和 shadcn 风格组件搭配。
- 免费动效与 Pro 页面模板分开；不要在同一页面叠加过多效果影响阅读和性能。

**适合用来做**：AI 产品发布页；创意 SaaS 官网；品牌介绍与获客页面

**还需要自己完成**：复杂后台、订单管理不能仅靠动效组件完成；需控制动画负担

### 免费与付费

**免费部分**：Magic UI 公共动效组件采用 MIT，可免费使用。

**付费及其他费用**：Magic UI Pro 的成品页面、区块和模板需要购买，免费 MCP 不解锁 Pro 资源。

**动效为主**：文字动画 / 粒子 / 数字。动效是主要卖点：动态文字、粒子背景、流动光束、滚动数字和展示卡片。适合产品发布页、SaaS 官网的视觉焦点，可以逐个挑选组合。 [看官方动效](https://magicui.design/docs/components)

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://magicui.design/llms.txt)

**参考链接**：[项目介绍](https://magicui.design/) · [源码与许可](https://github.com/magicuidesign/magicui) · [免费与付费范围](https://pro.magicui.design/) · [MCP 接入说明](https://magicui.design/docs/mcp) · [官方 LLM 文档](https://magicui.design/llms.txt) · [官方 README](https://raw.githubusercontent.com/magicuidesign/magicui/HEAD/README.md)


## 59. Aceternity UI


[官网](https://ui.aceternity.com/) · React · **免费 + 付费**

![Aceternity UI](assets/59.webp)

Aceternity UI 偏向具有视觉冲击力的 React 展示组件，适合品牌官网、产品发布页和个人作品集。很多组件本身就是一个可参考的页面视觉片段。

### 主要特点

- 背景、悬停、滚动和卡片效果适合用作局部亮点。
- 源码可以按项目需要调整，通常配合 Tailwind 与动画库。
- 免费组件和 Pro 区块、模板分开；复杂动画仍需在手机和弱设备上检查。

**适合用来做**：设计工作室官网；个人作品集；需要强视觉的产品落地页

**还需要自己完成**：不把它当数据看板或管理后台的完整基础；部分资源收费

### 免费与付费

**免费部分**：Aceternity UI 公共组件可按官网许可免费用于个人或商业项目。

**付费及其他费用**：Aceternity Pro 的组件区块、模板与套餐另行收费，不可把展示预览当作免费源码。

**动效为主**：悬停 / 滚动 / 背景。以卡片悬停、滚动联动、动态背景和视觉展示区块为主。适合品牌官网与作品集，先挑选一个核心效果，再围绕内容设计节奏。 [看官方动效](https://ui.aceternity.com/components)

### AI 接入

**MCP**：官方推荐 Registry MCP

**MCP / AI 费用**：shadcn registry MCP 工具本身可免费使用；访问收费 registry 或 Pro 资源仍需对应授权。

[AI 文档](https://ui.aceternity.com/llms.txt)

**参考链接**：[项目介绍](https://ui.aceternity.com/) · [源码与许可](https://github.com/aceternity) · [免费与付费范围](https://ui.aceternity.com/pro) · [MCP 接入说明](https://ui.aceternity.com/docs/cli) · [官方 LLM 文档](https://ui.aceternity.com/llms.txt)


## 60. React Bits


[官网](https://reactbits.dev/) · React · **免费 + 付费**

![React Bits](assets/60.webp)

React Bits 聚焦创意 React 动效，从文字、背景到交互式视觉都有独立示例。适合先看效果找灵感，再把选中的模块加入自己的页面。

### 主要特点

- 提供 JS/TS 与不同样式写法的变体，方便按项目习惯选择。
- 部分效果涉及 Canvas、WebGL 或动画依赖，接入成本不完全相同。
- 公共组件允许个人与商业使用，但附 Commons Clause；Pro 资源另有商业授权。

**适合用来做**：互动作品集；3D/动态背景官网；展览与创意体验入口

**还需要自己完成**：不负责完整 3D 世界或业务后台；WebGL 效果需实测移动端负载

### 免费与付费

**免费部分**：React Bits 公共组件可用于个人和商业项目，采用 MIT + Commons Clause，限制把组件本身作为竞争资源出售。

**付费及其他费用**：React Bits Pro 的组件、区块和模板需要单独商业许可。

**动效为主**：文字 / 背景 / 交互。提供大量独立的文字动画、动态背景与交互效果；部分涉及 Canvas 或 WebGL。适合寻找鲜明视觉方向，选择时可同时比较效果与接入依赖。 [看官方动效](https://reactbits.dev/)

### AI 接入

**MCP**：官方推荐 Registry MCP

**MCP / AI 费用**：shadcn registry MCP 工具本身可免费使用；访问收费 registry 或 Pro 资源仍需对应授权。

[AI 文档](https://reactbits.dev/llms.txt)

**参考链接**：[项目介绍](https://reactbits.dev/) · [源码与许可](https://github.com/DavidHDev/react-bits) · [免费与付费范围](https://pro.reactbits.dev/license) · [MCP 接入说明](https://reactbits.dev/get-started/mcp) · [官方 LLM 文档](https://reactbits.dev/llms.txt) · [官方 README](https://raw.githubusercontent.com/DavidHDev/react-bits/HEAD/README.md)


## 61. Motion Primitives


[官网](https://motion-primitives.com/) · React · **免费 + 付费**

![Motion Primitives](assets/61.webp)

Motion Primitives 提供可组合的 React 动画部件，偏向自然的界面过渡和细节表现。适合让现有产品更有节奏，而不是重建一整套业务控件。

### 主要特点

- 文字变化、进入退出和布局变化可作为独立部件使用。
- 围绕 Motion 组织，方便进一步调整时长和运动方式。
- 适合产品交互与作品展示；免费 primitives 与 Pro 组件、区块分开。

**适合用来做**：AI 工作台微交互；动态内容切换；SaaS 卡片与页面过渡

**还需要自己完成**：不能替代输入、业务表格、权限与完整主题体系

### 免费与付费

**免费部分**：Motion Primitives 公共组件采用 MIT，可免费使用。

**付费及其他费用**：Motion Primitives Pro 的额外组件与模板需要购买。

**动效为主**：文字过渡 / 布局变化。围绕文字、进入退出和布局变化提供可组合的动画部件。更偏产品界面里的自然过渡，适合把动效融入已有页面和交互流程。 [看官方动效](https://motion-primitives.com/)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://motion-primitives.com/) · [源码与许可](https://github.com/ibelick/motion-primitives) · [免费与付费范围](https://pro.motion-primitives.com/) · [官方 README](https://raw.githubusercontent.com/ibelick/motion-primitives/HEAD/README.md)


## 62. Animate UI


[官网](https://animate-ui.com/) · React · **免费**

![Animate UI](assets/62.webp)

Animate UI 在常见 React 组件中加入动画，适合希望表单、导航和反馈保持统一动效的项目。它比纯背景效果库更靠近日常应用控件。

### 主要特点

- 通过源码或 registry 安装，能继续修改动画与样式。
- 结合交互原语、Tailwind 与 Motion，减少自己组合动画控件的工作。
- 适合产品微交互；仍应保留减少动态效果的体验并检查键盘操作。

**适合用来做**：带统一动效的 React SaaS；交互式设置页；产品演示页

**还需要自己完成**：先确认每个组件依赖，性能与减少动态效果设置需要验收

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**动效为主**：控件动画 / 图标 / 文字。把动画加入常见 React 控件、图标和文字效果，适合统一按钮、导航、展开与反馈的运动方式。组件源码可继续定制。 [看官方动效](https://animate-ui.com/)

### AI 接入

**MCP**：官方推荐 Registry MCP

**MCP / AI 费用**：shadcn registry MCP 工具本身可免费使用；访问收费 registry 或 Pro 资源仍需对应授权。

**参考链接**：[项目介绍](https://animate-ui.com/) · [源码与许可](https://github.com/imskyleen/animate-ui) · [MCP 接入说明](https://animate-ui.com/docs/mcp) · [官方 README](https://raw.githubusercontent.com/imskyleen/animate-ui/HEAD/README.md)


## 63. coss ui


[官网](https://coss.com/ui) · React · **免费**

![coss ui](assets/63.webp)

coss ui 是基于 Base UI 的 React 源码组件集合，延续了 Origin UI 的相关入口。它强调清晰、简洁的基础视觉，适合搭建可持续扩展的产品组件系统。

### 主要特点

- 可以把组件源码加入项目，直接修改结构与 Tailwind 样式。
- 依托 Base UI 处理交互，让外观与业务封装留在项目内。
- UI 组件目录采用 MIT，但同一仓库其他目录可能采用不同许可，使用时要区分具体资源。

**适合用来做**：品牌化 SaaS 设置中心；项目工作台；自定义表单与卡片系统

**还需要自己完成**：旧 Origin UI 教程不一定匹配当前结构；拖拽和业务流程另做

### 免费与付费

**免费部分**：coss 的 UI 组件目录采用 MIT，可免费使用。

**付费及其他费用**：同一仓库并非所有目录都采用 MIT；其他目录可能采用 AGPLv3，不能直接套用 UI 组件许可。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：官方 AI 文档可公开读取；没有明确的专用 MCP 入口。

[AI 文档](https://coss.com/ui/llms.txt)

[Skills 指南](https://coss.com/ui/docs/skills)

**参考链接**：[项目介绍](https://coss.com/ui) · [源码与许可](https://github.com/cosscom/coss) · [仓库许可分区](https://github.com/cosscom/coss/blob/main/LICENSING.md) · [官方 LLM 文档](https://coss.com/ui/llms.txt) · [官方 AI 工作流 / Skills](https://coss.com/ui/docs/skills) · [官方 README](https://raw.githubusercontent.com/cosscom/coss/HEAD/README.md)


## 64. SwiftUI


[官网](https://developer.apple.com/swiftui/) · Swift / SwiftUI · **免费**

![SwiftUI](assets/64.webp)

SwiftUI 是 Apple 的声明式界面框架，通过状态描述界面如何显示。适合开发 Apple 平台原生应用，并利用系统导航、控件和平台行为。

### 主要特点

- 界面与状态绑定，适合组织列表、表单、导航和动画。
- 可以与 UIKit 等现有工程结合，逐步接入。
- 不同系统版本可用 API 不同；框架免费不代表 App Store 分发及其他服务都免费。

**适合用来做**：习惯打卡与个人记录；活动报名/预约客户端；内容阅读和会员服务 App

**还需要自己完成**：这是优先评估的原生基础，不是仅适合小项目；业务分层、数据同步与服务端仍要设计

### 免费与付费

**免费部分**：框架随 Apple SDK 提供，无需单独购买组件库。可使用免费 Apple 开发者账号学习、开发与测试。

**付费及其他费用**：通过 App Store 等方式分发通常需要付费的 Apple Developer Program；这属于分发服务费用，不是框架授权费。

**动画开发基础**：状态动画 / 弹簧 / 转场。框架提供动画、视图过渡和状态驱动的运动能力，可定制布局变化与元素匹配效果。需要自己编排，区别于直接复制一套成品特效。 [看官方动效](https://developer.apple.com/documentation/swiftui/animations)

### AI 接入

**MCP**：官方生态 MCP

**MCP / AI 费用**：Xcode MCP bridge 随开发工具使用；外部 AI 客户端与模型可能另收费。

**参考链接**：[项目介绍](https://developer.apple.com/swiftui/) · [开发与分发费用](https://developer.apple.com/support/compare-memberships/) · [MCP 接入说明](https://developer.apple.com/documentation/xcode/giving-external-agents-access-to-xcode) · [社区 Apple 文档 MCP（非 Apple 官方）](https://github.com/kimsungwhee/apple-docs-mcp)


## 65. UIKit


[官网](https://developer.apple.com/documentation/uikit) · Swift / Objective-C / UIKit · **免费**

![UIKit](assets/65.webp)

UIKit 是 Apple 的成熟原生界面框架，适合需要精细控制界面生命周期、布局与复杂交互的 iOS 应用。已有大型工程中也很常见。

### 主要特点

- View、ViewController、Collection View 等支持复杂页面组织。
- 布局、动画、手势和系统能力可以更细致地控制。
- 适合复杂原生产品或旧工程延续；编码与状态管理通常比声明式方案更繁琐。

**适合用来做**：已有大型 iOS App 持续开发；复杂列表/编辑器；需要精细手势控制的专业工具

**还需要自己完成**：不是与 SwiftUI 必须二选一；可渐进混合，不需要为使用某个模块重写整个 App

### 免费与付费

**免费部分**：框架随 Apple SDK 提供，无需单独购买组件库。可使用免费 Apple 开发者账号学习、开发与测试。

**付费及其他费用**：通过 App Store 等方式分发通常需要付费的 Apple Developer Program；这属于分发服务费用，不是框架授权费。

**动画开发基础**：视图动画 / 手势联动。通过视图动画、属性动画和转场 API 控制原生界面的移动、缩放与状态变化。适合精细编排复杂交互，需要自行实现动画逻辑。 [看官方动效](https://developer.apple.com/documentation/uikit/animation-and-haptics)

### AI 接入

**MCP**：官方生态 MCP

**MCP / AI 费用**：Xcode MCP bridge 随开发工具使用；外部 AI 客户端与模型可能另收费。

**参考链接**：[项目介绍](https://developer.apple.com/documentation/uikit) · [开发与分发费用](https://developer.apple.com/support/compare-memberships/) · [MCP 接入说明](https://developer.apple.com/documentation/xcode/giving-external-agents-access-to-xcode) · [社区 Apple 文档 MCP（非 Apple 官方）](https://github.com/kimsungwhee/apple-docs-mcp)


## 66. Swift Charts


[官网](https://developer.apple.com/documentation/charts) · Swift / SwiftUI · **免费**

![Swift Charts](assets/66.webp)

Swift Charts 是 Apple 面向 SwiftUI 的图表框架，适合在原生应用内呈现趋势、比较和分布。它与系统界面、布局和可访问性能力结合。

### 主要特点

- 通过图形标记和数据映射组织折线、柱状等图表。
- 坐标轴、图例和样式可按分析场景调整。
- 适合健康、财务或活动数据展示；高级图表与交互能力要按目标系统版本确认。

**适合用来做**：健康/运动趋势看板；收支统计；学习时长或经营指标图表

**还需要自己完成**：只提供图表；数据采集、指标定义、业务计算另做；核对每个 API 的系统版本要求

### 免费与付费

**免费部分**：框架随 Apple SDK 提供，无需单独购买组件库。可使用免费 Apple 开发者账号学习、开发与测试。

**付费及其他费用**：通过 App Store 等方式分发通常需要付费的 Apple Developer Program；这属于分发服务费用，不是框架授权费。

### AI 接入

**MCP**：官方生态 MCP

**MCP / AI 费用**：Xcode MCP bridge 随开发工具使用；外部 AI 客户端与模型可能另收费。

**参考链接**：[项目介绍](https://developer.apple.com/documentation/charts) · [开发与分发费用](https://developer.apple.com/support/compare-memberships/) · [MCP 接入说明](https://developer.apple.com/documentation/xcode/giving-external-agents-access-to-xcode) · [社区 Apple 文档 MCP（非 Apple 官方）](https://github.com/kimsungwhee/apple-docs-mcp)


## 67. SwiftUIX


[官网](https://github.com/SwiftUIX/SwiftUIX) · SwiftUI · **免费**

![SwiftUIX](assets/67.webp)

SwiftUIX 补充 SwiftUI 中没有直接提供、或使用起来不够方便的界面能力。适合在原生应用开发时按需补齐控件，而不是替换整个框架。

### 主要特点

- 封装部分 UIKit/AppKit 能力，使其更容易在 SwiftUI 中使用。
- 提供额外视图、布局和工具，减少自己重复桥接的代码。
- 应优先比较系统已有 API，并检查所用扩展对目标系统的支持。

**适合用来做**：需要系统能力桥接的生产力工具；多种输入/滚动控件的业务 App

**还需要自己完成**：不是整套 App 皮肤；先确认当前系统自带控件是否已经满足，按需引入

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/SwiftUIX/SwiftUIX) · [官方 README](https://raw.githubusercontent.com/SwiftUIX/SwiftUIX/HEAD/README.md)


## 68. PopupView


[官网](https://github.com/exyte/PopupView) · SwiftUI · **免费**

![PopupView](assets/68.webp)

PopupView 用于在 SwiftUI 中展示自定义弹出层、浮层和提示。适合活动提醒、操作确认或内容预览等轻量交互。

### 主要特点

- 可以控制出现位置、动画、背景和关闭方式。
- 内容由 SwiftUI 视图提供，便于保持产品自己的样式。
- 它解决展示层，不会自动提供通知业务、任务队列或权限管理。

**适合用来做**：会员引导；打卡成功反馈；筛选或说明面板

**还需要自己完成**：不负责会员业务、支付或复杂导航；普通系统弹窗已够用时不必新增依赖

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：弹出 / 滑入 / 缩放。弹窗可以从不同方向滑入或缩放出现，也能配置退出方向和弹簧动画。适合提示、浮层和轻量操作面板。 [看官方动效](https://github.com/exyte/PopupView)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/exyte/PopupView) · [官方 README](https://raw.githubusercontent.com/exyte/PopupView/HEAD/README.md)


## 69. AlertToast


[官网](https://github.com/elai950/AlertToast) · SwiftUI · **免费**

![AlertToast](assets/69.webp)

AlertToast 为 SwiftUI 提供轻量提示与状态反馈，适合保存成功、加载完成和短暂错误提示。比完整模态对话框更轻，不打断整页流程。

### 主要特点

- 支持不同样式的提示内容与展示位置。
- 通过状态绑定控制出现与隐藏，方便跟随操作结果。
- 适合即时反馈；需要用户确认的重要决定不应只用短暂 Toast 表达。

**适合用来做**：保存成功提示；签到反馈；网络提交中的加载提示

**还需要自己完成**：不能把 Toast 当作需要用户确认的重要决策流程；实际状态来自业务逻辑

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：提示出现 / 状态反馈。提示进入退出之外，还提供成功勾选和错误标记的动画反馈，适合保存、上传或提交后的短暂状态提示。 [看官方动效](https://github.com/elai950/AlertToast)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/elai950/AlertToast) · [官方 README](https://raw.githubusercontent.com/elai950/AlertToast/HEAD/README.md)


## 70. BottomSheet（SwiftUI）


[官网](https://github.com/lucaszischka/BottomSheet) · SwiftUI · **免费**

![BottomSheet（SwiftUI）](assets/70.webp)

这个 BottomSheet 为 SwiftUI 提供可拖动的底部面板，适合地图详情、筛选器和分步信息展示。面板可以在多个高度之间切换。

### 主要特点

- 通过位置状态组织收起、半展开与展开等层级。
- 内容与背景可以自定义，以融入现有原生页面。
- 与滚动视图、键盘和系统手势的配合需要在目标设备验证。

**适合用来做**：地图地点详情；电商筛选；播放队列或预约时段选择

**还需要自己完成**：不是整套地图或预约系统；先比较系统 sheet 能力是否已足够

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：拖拽 / 面板展开。底部面板可在多个高度之间切换，并配置状态变化动画。适合地图详情和筛选面板的拖拽、展开与收起。 [看官方动效](https://github.com/lucaszischka/BottomSheet)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/lucaszischka/BottomSheet) · [官方 README](https://raw.githubusercontent.com/lucaszischka/BottomSheet/HEAD/README.md)


## 71. SwiftUIPager


[官网](https://github.com/fermoya/SwiftUIPager) · SwiftUI · **免费**

![SwiftUIPager](assets/71.webp)

SwiftUIPager 是 SwiftUI 的分页滑动容器，适合卡片浏览、教程引导和内容翻页。它把分页状态与动画组织成可复用组件。

### 主要特点

- 支持横向或纵向分页，并能调整页间距和展示效果。
- 可以用自己的 SwiftUI 内容构建每一页。
- 适合以页为单位的浏览；长列表和复杂嵌套滚动应另行评估。

**适合用来做**：新手引导；课程卡片浏览；图片或商品轮播

**还需要自己完成**：不自带课程、商品或图片服务；简单分页可先评估系统组件

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：分页滑动 / 卡片切换。分页容器支持水平、垂直滑动与分页动画，适合卡片浏览、引导页和内容切换。可以调整页面间距与过渡方式。 [看官方动效](https://github.com/fermoya/SwiftUIPager)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/fermoya/SwiftUIPager) · [官方 README](https://raw.githubusercontent.com/fermoya/SwiftUIPager/HEAD/README.md)


## 72. Exyte Chat


[官网](https://github.com/exyte/Chat) · SwiftUI · **免费**

![Exyte Chat](assets/72.webp)

Exyte Chat 提供可定制的 SwiftUI 聊天界面，包括消息、输入区和媒体选择相关能力。适合在已有通信后端上搭建聊天体验。

### 主要特点

- 消息单元格和输入区可以按品牌或消息类型调整。
- 支持围绕媒体附件和消息交互扩展界面。
- 它不是完整聊天服务，消息存储、实时通信、账号与推送需要自行接入。

**适合用来做**：AI 助手聊天；社区私信；移动客服

**还需要自己完成**：只解决聊天 UI；模型接口、流式输出、账号、推送、历史消息与安全规则另接

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/exyte/Chat) · [官方 README](https://raw.githubusercontent.com/exyte/Chat/HEAD/README.md)


## 73. AnimatedTabBar


[官网](https://github.com/exyte/AnimatedTabBar) · SwiftUI · **免费**

![AnimatedTabBar](assets/73.webp)

AnimatedTabBar 给 SwiftUI 底部导航提供动画效果，适合想让主要入口更有辨识度的原生应用。它关注导航外观与状态切换。

### 主要特点

- 可以选择动画样式，并自定义图标和颜色。
- 选中状态能与应用自己的页面导航绑定。
- 适合轻量的导航点缀；页面路由与状态恢复仍需由应用管理。

**适合用来做**：生活方式 App；习惯打卡；年轻化内容社区的底部导航

**还需要自己完成**：只提供导航视觉；复杂信息架构和页面状态另做，先考虑系统 TabView 与无障碍

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**动效为主**：导航切换 / 图标动画。动画底部导航是这个项目的核心：选中指示与图标在切换时产生运动，并提供多种预设表现。适合突出移动应用的主入口。 [看官方动效](https://github.com/exyte/AnimatedTabBar)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/exyte/AnimatedTabBar) · [官方 README](https://raw.githubusercontent.com/exyte/AnimatedTabBar/HEAD/README.md)


## 74. ScalingHeaderScrollView


[官网](https://github.com/exyte/ScalingHeaderScrollView) · SwiftUI · **免费**

![ScalingHeaderScrollView](assets/74.webp)

ScalingHeaderScrollView 用于实现随滚动缩放、收起的顶部区域，适合个人主页、活动详情和封面型内容。它让头图与正文之间的过渡更连贯。

### 主要特点

- 顶部视图可以随着滚动变化，形成伸缩或吸顶效果。
- 能配合 SwiftUI 内容构建自己的封面和信息层级。
- 适合视觉内容页；嵌套滚动、刷新和导航栏行为需要一起验证。

**适合用来做**：个人主页；课程介绍；活动详情或商品详情页

**还需要自己完成**：不负责完整详情业务；嵌套滚动、动态内容高度与导航栏关系需验证

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：滚动联动 / 头图伸缩。顶部区域随滚动缩小、展开或吸附，适合活动详情、个人主页和封面型内容。动效围绕滚动位置发生，不只是按钮悬停。 [看官方动效](https://github.com/exyte/ScalingHeaderScrollView)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/exyte/ScalingHeaderScrollView) · [官方 README](https://raw.githubusercontent.com/exyte/ScalingHeaderScrollView/HEAD/README.md)


## 75. WaterfallGrid


[官网](https://github.com/paololeonardi/WaterfallGrid) · SwiftUI · **免费**

![WaterfallGrid](assets/75.webp)

WaterfallGrid 为 SwiftUI 提供瀑布流布局，适合高度不一致的图片、卡片和作品内容。它解决排列方式，不绑定某种卡片视觉。

### 主要特点

- 按内容高度形成多列布局，适合图片墙和灵感收藏。
- 列数、间距和动画可按屏幕与内容调整。
- 图片加载、缓存、分页和大数据量性能需要由项目补充。

**适合用来做**：图片社区；灵感素材库；作品集和收藏夹

**还需要自己完成**：不是标准任务看板：没有任务列工作流；图片加载、分页与性能另做

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/paololeonardi/WaterfallGrid) · [官方 README](https://raw.githubusercontent.com/paololeonardi/WaterfallGrid/HEAD/README.md)


## 76. DGCharts


[官网](https://github.com/ChartsOrg/Charts) · Swift / UIKit · **免费**

![DGCharts](assets/76.webp)

DGCharts 是面向 Apple 平台的图表库，适合需要多种传统图表和交互能力的原生应用。它主要用于 UIKit 工程，也可通过桥接用于 SwiftUI。

### 主要特点

- 折线、柱状、饼图等图表类型可用于仪表盘和报告。
- 支持坐标、图例、标记和交互配置，适合精细定制。
- 它负责图表展示，数据计算、业务指标和解释文本仍由应用提供。

**适合用来做**：既有 UIKit 的销售/经营看板；运动趋势；金融数据展示

**还需要自己完成**：与 Apple Swift Charts 是不同项目；若已有 SwiftUI 架构，应先比较桥接成本

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：图表入场 / 数据展开。支持图表在 X、Y 轴方向逐步展开的动画，适合让原生数据图表的首次呈现更容易跟随。配合拖动与缩放交互使用。 [看官方动效](https://github.com/ChartsOrg/Charts)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/ChartsOrg/Charts) · [官方 README](https://raw.githubusercontent.com/ChartsOrg/Charts/HEAD/README.md)


## 77. FSCalendar


[官网](https://github.com/WenchaoD/FSCalendar) · UIKit / Objective-C / Swift · **免费**

![FSCalendar](assets/77.webp)

FSCalendar 为 UIKit 提供可定制日历，适合签到、预约和日期选择界面。外观与选中状态可以围绕业务扩展。

### 主要特点

- 月视图、日期选择和单元格样式可以调整。
- 可标记事件、禁用日期并处理日期选中交互。
- 它不是完整排班或预约系统，时段规则与数据同步需要自行实现。

**适合用来做**：月历签到；日程标记；简单日期选择与预约入口

**还需要自己完成**：日历不等于预约系统：时段库存、冲突检测、提醒服务另做

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/WenchaoD/FSCalendar) · [官方 README](https://raw.githubusercontent.com/WenchaoD/FSCalendar/HEAD/README.md)


## 78. HorizonCalendar


[官网](https://github.com/airbnb/HorizonCalendar) · UIKit / SwiftUI 桥接 · **免费**

![HorizonCalendar](assets/78.webp)

HorizonCalendar 是 Airbnb 开源的原生日历组件，适合展示较长日期范围并定制每一天的内容。它更关注灵活的日历布局与滚动。

### 主要特点

- 日期和月份内容可自定义，便于添加价格、状态或事件标记。
- 支持日期范围相关的视觉表达，适合旅行与日程产品。
- 预约规则、可用时段与后台数据需要应用自己提供。

**适合用来做**：酒店入住/退房日期选择；跨月日期范围；排期浏览

**还需要自己完成**：不实现房态、排班算法或订单；日期规则仍由业务处理

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/airbnb/HorizonCalendar) · [官方 README](https://raw.githubusercontent.com/airbnb/HorizonCalendar/HEAD/README.md)


## 79. MessageKit


[官网](https://github.com/MessageKit/MessageKit) · Swift / UIKit · **免费**

![MessageKit](assets/79.webp)

MessageKit 为 UIKit 提供聊天消息界面的基础结构，适合有自己的消息后端、但希望减少聊天列表开发工作的项目。

### 主要特点

- 通过消息模型组织文字、图片和其他消息内容。
- 消息单元格和布局可以按应用需求扩展。
- 实时通信、历史存储、已读同步和通知都不是组件自动提供的服务。

**适合用来做**：既有 iOS 社区私信；客服聊天；UIKit AI 助手界面

**还需要自己完成**：服务端、推送、流式 AI 内容和消息持久化都需另外实现

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/MessageKit/MessageKit) · [官方 README](https://raw.githubusercontent.com/MessageKit/MessageKit/HEAD/README.md)


## 80. InputBarAccessoryView


[官网](https://github.com/nathantannar4/InputBarAccessoryView) · Swift / UIKit · **免费**

![InputBarAccessoryView](assets/80.webp)

InputBarAccessoryView 专注 iOS 输入栏，适合聊天输入、评论框和带附件操作的编辑区域。它可以独立使用，也常与消息列表组合。

### 主要特点

- 输入框高度、左右按钮和附件入口可以自定义。
- 围绕键盘和输入状态组织布局，适合原生交互。
- 它只负责输入界面，消息发送、上传和内容审核要自行实现。

**适合用来做**：聊天输入；评论回复；带附件按钮的输入面板

**还需要自己完成**：只提供输入栏，不包括消息列表、文件上传服务和完整编辑器

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/nathantannar4/InputBarAccessoryView) · [官方 README](https://raw.githubusercontent.com/nathantannar4/InputBarAccessoryView/HEAD/README.md)


## 81. FloatingPanel


[官网](https://github.com/scenee/FloatingPanel) · UIKit / SwiftUI · **免费**

![FloatingPanel](assets/81.webp)

FloatingPanel 为 UIKit 提供可拖动的浮动面板，常用于地图详情、搜索结果和分层信息展示。适合在一个页面中保留背景上下文。

### 主要特点

- 可配置多个停靠位置，并自定义面板外观。
- 能够与滚动内容结合，组织展开与收起的交互。
- 系统底部面板已能满足的简单需求可先用原生 API；复杂手势仍要真机检查。

**适合用来做**：地图检索结果；地点详情；商品或内容快速预览

**还需要自己完成**：地图本身、搜索与推荐服务另接；滚动联动和手势需要验证

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：拖拽回弹 / 面板停靠。浮动面板采用弹簧行为，可在停靠位置之间移动并跟随手势。适合地图结果、搜索详情等保留背景上下文的原生交互。 [看官方动效](https://github.com/scenee/FloatingPanel)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/scenee/FloatingPanel) · [官方 README](https://raw.githubusercontent.com/scenee/FloatingPanel/HEAD/README.md)


## 82. Eureka


[官网](https://github.com/xmartlabs/Eureka) · Swift / UIKit · **免费**

![Eureka](assets/82.webp)

Eureka 用声明式方式组织 UIKit 表单，适合设置、资料填写和业务信息录入。它把不同输入行组合成结构清晰的表单。

### 主要特点

- 内置多种行类型，也可以创建自己的表单单元格。
- 支持按条件显示、输入校验和表单值管理等常见需求。
- 适合传统 UIKit 工程；提交接口、业务规则和权限逻辑需要独立实现。

**适合用来做**：企业巡检录入；客户资料编辑；已有 UIKit App 的多字段设置页

**还需要自己完成**：新 SwiftUI 项目先比较系统 Form；校验规则、离线草稿和同步另做

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/xmartlabs/Eureka) · [官方 README](https://raw.githubusercontent.com/xmartlabs/Eureka/HEAD/README.md)


## 83. SkeletonView


[官网](https://github.com/Juanpe/SkeletonView) · Swift / UIKit · **免费**

![SkeletonView](assets/83.webp)

SkeletonView 为 UIKit 视图增加骨架屏，用来在真实数据到达前保持页面结构。适合图片列表、卡片和信息详情的加载状态。

### 主要特点

- 可以在既有视图上显示占位形状，减少单独绘制骨架的工作。
- 支持颜色与动画配置，以配合产品样式。
- 它只改善等待时的反馈，不会让网络请求或图片下载本身更快。

**适合用来做**：内容信息流加载；订单列表加载；个人资料页占位

**还需要自己完成**：不加速网络或数据处理；只是加载反馈，不是完整信息流组件

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：骨架脉冲 / 流光加载。内置骨架脉冲与渐变滑动效果，也可以自定义加载动画。适合图片列表、卡片和详情在等待数据时保持视觉反馈。 [看官方动效](https://github.com/Juanpe/SkeletonView)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/Juanpe/SkeletonView) · [官方 README](https://raw.githubusercontent.com/Juanpe/SkeletonView/HEAD/README.md)


## 84. React Native Paper


[官网](https://reactnativepaper.com/) · React Native · **免费**

![React Native Paper](assets/84.webp)

React Native Paper 把 Material Design 风格带到 React Native，适合希望移动应用拥有一致控件和主题的项目。

### 主要特点

- 按钮、输入、卡片、对话框和导航等覆盖日常移动界面。
- 主题和明暗模式能统一跨页面外观。
- 适合跨端业务应用；原生导航、数据服务和平台权限仍需额外接入。

**适合用来做**：会员服务 App；内部工单/巡检 App；表单和设置密集的移动业务

**还需要自己完成**：Material 视觉不等于 Apple 默认视觉；实际 Expo/React Native 版本要核对

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：官方 AI 文档可公开读取；没有明确的专用 MCP 入口。

[AI 文档](https://callstack.github.io/react-native-paper/llms.txt)

**参考链接**：[项目介绍](https://reactnativepaper.com/) · [源码与许可](https://github.com/callstack/react-native-paper) · [官方 LLM 文档](https://callstack.github.io/react-native-paper/llms.txt) · [官方 README](https://raw.githubusercontent.com/callstack/react-native-paper/HEAD/README.md)


## 85. React Native Elements


[官网](https://reactnativeelements.com/) · React Native · **免费**

![React Native Elements](assets/85.webp)

React Native Elements 是通用的 React Native 组件集合，适合快速搭建表单、列表与常见移动页面。它更强调方便使用和主题复用。

### 主要特点

- 常见按钮、卡片、输入与列表元素可以直接组合。
- 主题机制便于统一品牌色和组件默认属性。
- 适合原型和业务应用；复杂导航、聊天或图表通常需要其他库配合。

**适合用来做**：电商客户端基础页面；会员中心；快速移动产品原型

**还需要自己完成**：订单、购物车、支付服务仍属业务层；核查依赖与新架构兼容

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://reactnativeelements.com/) · [源码与许可](https://github.com/react-native-elements/react-native-elements) · [官方 README](https://raw.githubusercontent.com/react-native-elements/react-native-elements/HEAD/README.md)


## 86. UI Kitten


[官网](https://akveo.github.io/react-native-ui-kitten/) · React Native · **免费**

![UI Kitten](assets/86.webp)

UI Kitten 基于 Eva Design System，为 React Native 提供统一的设计语言和主题能力。适合希望应用外观一致、明暗模式切换清晰的项目。

### 主要特点

- 组件围绕设计映射和主题组织，便于集中定制。
- 表单、卡片、菜单等可以组成常见移动业务页面。
- 需要检查对应 React Native、Expo 版本与依赖，设计体系风格也应与产品匹配。

**适合用来做**：多主题移动应用；订阅服务客户端；企业移动工作台

**还需要自己完成**：采用前核查当前 RN/Expo 支持与维护节奏；不要只看模板截图

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://akveo.github.io/react-native-ui-kitten/) · [源码与许可](https://github.com/akveo/react-native-ui-kitten) · [官方 README](https://raw.githubusercontent.com/akveo/react-native-ui-kitten/HEAD/README.md)


## 87. React Native UI Lib


[官网](https://wix.github.io/react-native-ui-lib/) · React Native · **免费**

![React Native UI Lib](assets/87.webp)

React Native UI Lib 来自 Wix，提供基础控件、布局和设计系统工具。适合需要在多个移动页面间共享主题与组件规则的产品。

### 主要特点

- 颜色、排版和间距等基础定义可以集中管理。
- 常见交互与展示组件减少移动页面的重复搭建。
- 适合应用型产品；原生依赖和平台表现需要在实际工程中确认。

**适合用来做**：企业移动工作台；商户管理 App；中大型移动业务产品

**还需要自己完成**：不替代状态管理、导航和数据层；检查当前原生依赖版本

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://wix.github.io/react-native-ui-lib/) · [源码与许可](https://github.com/wix/react-native-ui-lib) · [官方 README](https://raw.githubusercontent.com/wix/react-native-ui-lib/HEAD/README.md)


## 88. gluestack-ui


[官网](https://gluestack.io/) · React Native / Expo / NativeWind · **免费 + 付费**

![gluestack-ui](assets/88.webp)

gluestack-ui 面向 React Native 与 Web，采用可组合、可定制的组件方式，适合想共享设计语言的跨端产品。

### 主要特点

- 组件与样式体系可以按项目需要组合和修改。
- 适合表单、导航和常见应用布局，并提供额外的 Pro 模板。
- 不同大版本的样式工具和 AI 接入有差异，MCP v2 文档不能直接用于 v5。

**适合用来做**：希望 AI 可修改源码的移动 SaaS；会员 App；自定义品牌的移动工具

**还需要自己完成**：当前 v5 官方明确不支持 Next.js；不要把旧版 universal monorepo 说明套到新版

### 免费与付费

**免费部分**：gluestack-ui 的开源组件采用 MIT，可免费使用。

**付费及其他费用**：gluestack-ui Pro 的 React Native 页面模板与资源需要另外购买。

### AI 接入

**MCP**：官方 MCP

**MCP / AI 费用**：接入页未标注独立服务价格；具体客户端与所调用的模型费用另计。

[AI 文档](https://gluestack.io/llms.txt)

**参考链接**：[项目介绍](https://gluestack.io/) · [源码与许可](https://github.com/gluestack/gluestack-ui) · [免费与付费范围](https://pro.gluestack.io/) · [MCP 接入说明](https://gluestack.io/ui/docs/mcp-server/mcp-server) · [官方 LLM 文档](https://gluestack.io/llms.txt) · [官方 README](https://raw.githubusercontent.com/gluestack/gluestack-ui/HEAD/README.md)


## 89. React Native Reusables


[官网](https://reactnativereusables.com/) · React Native / Expo / NativeWind · **免费**

![React Native Reusables](assets/89.webp)

React Native Reusables 把类似 shadcn 的源码组件方式带到 React Native。适合希望快速拥有一套基础控件，又愿意在代码库内持续定制的团队。

### 主要特点

- 组件代码进入自己的项目，可以修改外观与结构。
- 配合 NativeWind 和原语组织跨端样式与行为。
- 适合品牌化移动应用；需要匹配 Expo、React Native 和样式工具的版本。

**适合用来做**：品牌化移动 SaaS；任务管理 App 的卡片/详情/设置；AI 助手外框

**还需要自己完成**：任务拖拽和 AI 聊天不是现成业务；组件导航与移动手势仍需开发

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://reactnativereusables.com/) · [源码与许可](https://github.com/founded-labs/react-native-reusables) · [官方 README](https://raw.githubusercontent.com/founded-labs/react-native-reusables/HEAD/README.md)


## 90. Gorhom Bottom Sheet


[官网](https://gorhom.dev/react-native-bottom-sheet/) · React Native · **免费**

![Gorhom Bottom Sheet](assets/90.webp)

Gorhom Bottom Sheet 是 React Native 的底部面板方案，适合筛选、详情和地图类交互。它把手势、停靠高度和滚动内容组织在一起。

### 主要特点

- 面板可在不同高度之间切换，并与列表滚动配合。
- 提供模态等使用方式，适合复用在多个页面。
- 依赖动画与手势生态，安装和版本配置要正确；业务内容与数据需要自行提供。

**适合用来做**：地图地点面板；预约筛选；电商 SKU 选择或播放队列

**还需要自己完成**：不提供地图、库存或预约逻辑；键盘、滚动嵌套与 RN 新架构要实测

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：手势拖拽 / 面板回弹。底部面板强调顺滑手势和吸附动画，与滚动列表组合使用。适合 React Native 的筛选、地图详情和分层内容。 [看官方动效](https://gorhom.dev/react-native-bottom-sheet/)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://gorhom.dev/react-native-bottom-sheet/) · [源码与许可](https://github.com/gorhom/react-native-bottom-sheet) · [官方 README](https://raw.githubusercontent.com/gorhom/react-native-bottom-sheet/HEAD/README.md)


## 91. React Native Gifted Chat


[官网](https://github.com/FaridSafi/react-native-gifted-chat) · React Native · **免费**

![React Native Gifted Chat](assets/91.webp)

Gifted Chat 提供 React Native 聊天界面的常见结构，适合快速做出文字消息、气泡与输入区。可以在其基础上定制消息内容和操作。

### 主要特点

- 消息列表、气泡、头像、时间与输入组件能组合使用。
- 通过渲染接口调整品牌样式和不同消息类型。
- 它不是聊天后端，账号、实时消息、附件上传和推送需要其他服务。

**适合用来做**：iOS + Android 客服；社区私信；跨平台 AI 聊天

**还需要自己完成**：实时通信、AI 流式输出、通知、鉴权和数据存储另外做

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/FaridSafi/react-native-gifted-chat) · [官方 README](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/HEAD/README.md)


## 92. Victory Native


[官网](https://github.com/FormidableLabs/victory-native-xl) · React Native / Skia / Reanimated · **免费**

![Victory Native](assets/92.webp)

Victory Native 用于在 React Native 中绘制交互图表，当前实现结合 Skia、动画与手势生态。适合原生应用的数据看板和趋势展示。

### 主要特点

- 可组合坐标与图形元素，按数据表达需求调整视觉。
- 动画与手势能力适合移动设备上的图表探索。
- 需要配置相应原生依赖；数据处理、指标含义和异常解释仍由产品负责。

**适合用来做**：iPhone + Android 经营看板；运动数据趋势；收支图表

**还需要自己完成**：不是整套看板布局；确认当前所用仓库与包版本匹配，不混用旧教程

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

**含动画组件**：图表动画 / 手势探索。通过 Skia 与 Reanimated 等依赖组织原生图表和动画，可配合手势交互。适合趋势与指标探索，需要按图表配置具体的运动表现。 [看官方动效](https://github.com/FormidableLabs/victory-native-xl)

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/FormidableLabs/victory-native-xl) · [官方 README](https://raw.githubusercontent.com/FormidableLabs/victory-native-xl/HEAD/README.md)


## 93. React Native Calendars


[官网](https://github.com/wix/react-native-calendars) · React Native · **免费**

![React Native Calendars](assets/93.webp)

React Native Calendars 来自 Wix，提供日历、日期标记和日程相关组件。适合签到、预约、活动和个人计划等移动应用场景。

### 主要特点

- 支持不同日期标记方式，能表达事件、区间或状态。
- 日历与日程视图可按信息结构组合使用。
- 它负责日期界面，预约冲突、重复规则和跨设备同步要自行实现。

**适合用来做**：运动打卡月历；活动日程；预约日期与个人计划

**还需要自己完成**：时间资源冲突、提醒推送、日程同步与预订服务另实现

### 免费与付费

**免费部分**：组件源码可免费使用，商业项目按项目开源许可使用。

**付费及其他费用**：使用这里介绍的组件库本身，不需要购买组件授权。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：未提供明确的专用 MCP 入口。

**参考链接**：[项目介绍](https://github.com/wix/react-native-calendars) · [官方 README](https://raw.githubusercontent.com/wix/react-native-calendars/HEAD/README.md)


## 94. UnoCSS


[官网](https://unocss.dev/) · 框架无关 / Web CSS · **免费**

![UnoCSS](assets/94.webp)

UnoCSS 是按需生成样式的原子化 CSS 引擎，不是带现成按钮和卡片的 UI 库。适合想掌握视觉细节、又希望以简短类名高效编写样式的项目。

### 主要特点

- 通过预设、快捷方式和自定义规则生成需要的 CSS，设计约定可以写进配置。
- 图标、属性化写法和多种构建集成方便与现有技术栈配合。
- 适合作为自建设计系统的样式底层；控件交互、可访问性和页面设计仍需另外完成。

**适合用来做**：品牌官网；活动落地页；内容站；自建设计系统

**还需要自己完成**：交互控件、无障碍、表单与业务逻辑仍需另外实现

### 免费与付费

**免费部分**：UnoCSS 核心引擎与官方预设采用 MIT，可免费使用。

**付费及其他费用**：使用 UnoCSS 本身不需要订阅；项目选用的商业图标、字体或外部资源另计。

### AI 接入

**MCP**：未确认专用 MCP

**MCP / AI 费用**：官方 AI 文档可公开读取；没有明确的专用 MCP 入口。

[AI 文档](https://unocss.dev/llms.txt)

**参考链接**：[项目介绍](https://unocss.dev/) · [源码与许可](https://github.com/unocss/unocss) · [官方 LLM 文档](https://unocss.dev/llms.txt) · [官方 README](https://raw.githubusercontent.com/unocss/unocss/HEAD/README.md)