生态与来源
45 个已核实来源，同一种语义的多种实现。
从 awesome list 发现候选，再回到官方文档核实。这里同时包含完整组件库、无样式原语、Agent UI 和基础引擎；定位不同，不能按包名直接排名。
45 个来源
shadcn/ui
React 组件源码，复制后由项目持有和维护。
React / Next.js
接入、定制与复用边界
- 定位
- 组件源码与分发
- 接入方式
- 通过 CLI 或手动复制；按组件安装所需依赖。
- 主题与定制
- 直接改源码、主题变量和组件组合；当前文档提供多种基元版本。
- 注意
- 源码分发不等于没有依赖；升级与本地修改需要自行协调。
MUI
以 Material Design 为参考的 React 通用组件体系。
React / Next.js
接入、定制与复用边界
- 定位
- 通用组件库
- 接入方式
- 安装 Material UI 包及所选样式方案要求的依赖。
- 主题与定制
- 主题、样式覆盖和组件插槽；支持响应式布局工具。
- 注意
- Material UI 与 MUI X 分开评估；高级网格等产品的许可范围不同。
Ant Design
面向企业应用的 React 表单、数据和操作组件。
React / Next.js
接入、定制与复用边界
- 定位
- 设计系统与组件库
- 接入方式
- 安装 antd；按官方接入指引配置应用与样式。
- 主题与定制
- 设计 Token、主题算法和组件配置。
- 注意
- 本目录映射 React antd；Ant Design X 和其他生态移植不自动计入。
AI Elements
当前官方入口以 shadcn/ui 组件组合展示 Agent 交互。
React / Next.js
接入、定制与复用边界
- 定位
- Agent 交互模式
- 接入方式
- 复制模式示例并安装其基础组件；当前模式没有独立包。
- 主题与定制
- 持有组合代码，按产品状态映射 Trace、Message 和输入组件。
- 注意
- 旧站声明 2026 年 11 月底弃用并迁往 shadcn/ui；旧副本仍可使用。当前 shadcn 示例遵循其 MIT 许可；旧项目为 Apache-2.0，需分别核对。
CopilotKit
把 Agent 状态、工具和人工交互接入应用的 SDK。
React / Next.js
接入、定制与复用边界
- 定位
- Agent 接入与 UI
- 接入方式
- React V2 参考使用 @copilotkit/react-core/v2；需要连接相应 Agent。
- 主题与定制
- 组件插槽、样式和自定义工具渲染器。
- 注意
- UI 之外还包含运行时集成；钩子提供交互机制，不替你定义业务审批规则。
Radix Primitives
为 React 提供可组合的交互行为与结构。
React / Next.js
接入、定制与复用边界
- 定位
- 无样式交互基元
- 接入方式
- 安装所需 Primitive 包或官方聚合入口。
- 主题与定制
- 自行编写 CSS，借助状态属性和组件组合定制。
- 注意
- Primitives 与带样式的 Radix Themes 是不同层次；不能把两者的目录混为一项。
React Aria
提供选择、日期、集合和弹层等 React 交互构件。
React / Next.js
接入、定制与复用边界
- 定位
- 无样式组件与可访问性交互
- 接入方式
- 安装 react-aria-components，组合各组件部件。
- 主题与定制
- 默认不带样式，可用 CSS、Tailwind 等；示例可通过 registry 获取。
- 注意
- 国际化与键盘交互是基础能力；产品文案、焦点路径和最终对比度仍需自行验证。
Chakra UI
面向 React 应用的组件、语义 Token 与 recipes。
React / Next.js
接入、定制与复用边界
- 定位
- 带样式组件系统
- 接入方式
- 安装 @chakra-ui/react 并按当前安装指引配置 provider。
- 主题与定制
- 通过语义 Token、recipes、插槽和组合控制外观。
- 注意
- Chakra、Ark 和 Zag 处于不同抽象层；高级模板与核心组件的许可分开核对。
Mantine
同时覆盖表单输入、导航、弹层、日期与反馈。
React / Next.js
接入、定制与复用边界
- 定位
- 组件库与 hooks
- 接入方式
- 按需接入 @mantine/core 及对应扩展包和样式。
- 主题与定制
- 主题、CSS 变量、Styles API 和无样式入口。
- 注意
- 日期、通知、表单等功能可能来自独立包；第三方 DataTable 不是核心 Table。
Base UI
提供 Button、Form、Combobox、Drawer 等组合部件。
React / Next.js
接入、定制与复用边界
- 定位
- 无样式 React 组件
- 接入方式
- 按官方 quick start 安装组件包并组合部件。
- 主题与定制
- 不限定样式工具，通过状态属性、render 与 CSS 定制。
- 注意
- 这不是 Material UI 视觉主题；弹层 portal 与应用根层叠关系需要正确接入。
Headless UI
分别提供 React 与 Vue 的表单、菜单和弹层构件。
React / Next.js、Vue / Nuxt
接入、定制与复用边界
- 定位
- 无样式交互组件
- 接入方式
- 选择 @headlessui/react 或 @headlessui/vue。
- 主题与定制
- 由应用提供样式，常与 Tailwind CSS 搭配。
- 注意
- React 与 Vue 的目录和版本不必完全一致，映射需查看对应框架页。
Ark UI
以状态机驱动同一类交互的框架适配。
React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Solid
接入、定制与复用边界
- 定位
- 跨框架无样式组件
- 接入方式
- 安装对应 React、Vue、Svelte 或 Solid 包。
- 主题与定制
- 自行提供样式并组合组件部件，状态属性用于呈现变化。
- 注意
- 跨框架不代表 API 能直接互换；标记为 preview 的组件需要单独评估。
Element Plus
覆盖桌面表单、表格、树、反馈与布局。
Vue / Nuxt
接入、定制与复用边界
- 定位
- Vue 3 通用组件库
- 接入方式
- 接入 element-plus 及所需样式，按需或全量引入。
- 主题与定制
- CSS 变量、主题样式、组件属性与 slots。
- 注意
- Virtualized Table 和部分新增控件有独立稳定性标记；功能与可访问性按具体组件核验。
Naive UI
提供可配置主题的 Vue 组件和结构化数据展示。
Vue / Nuxt
接入、定制与复用边界
- 定位
- Vue 3 组件库
- 接入方式
- 安装 naive-ui，按需导入组件和 provider。
- 主题与定制
- 通过主题配置、组件属性和渲染函数定制。
- 注意
- 表格虚拟化、异步树展开和受控选择各有约束；官方入口已去掉旧 os-theme 路径。
PrimeVue
覆盖数据密集界面、输入、导航和反馈。
Vue / Nuxt
接入、定制与复用边界
- 定位
- Vue 组件套件
- 接入方式
- 按当前版本安装 PrimeVue 与主题依赖。
- 主题与定制
- 主题配置、样式方案和组件部件接口。
- 注意
- 核心、PRO Suite、模板及具体版本的许可证必须分别核对，不推断统一免费。
Vuetify
为 Vue 提供布局、表单、导航和数据组件。
Vue / Nuxt
接入、定制与复用边界
- 定位
- Material 风格 Vue 组件体系
- 接入方式
- 安装 vuetify 并配置应用插件及所需样式。
- 主题与定制
- 主题、显示断点、组件 defaults 与 slots。
- 注意
- Awesome 列表仍有 Vue 2 描述；实施应以当前 Vue 与 Vuetify 版本配对为准。
Nuxt UI
在 Reka UI 与 Tailwind CSS 上提供高层界面组件。
Vue / Nuxt
接入、定制与复用边界
- 定位
- Vue / Nuxt 组件库
- 接入方式
- 可作为 Nuxt 模块或 Vue 的 Vite 插件接入。
- 主题与定制
- 主题 Token、Tailwind Variants 与组件配置。
- 注意
- 不要求必须使用 Nuxt；已核对当前目录，不把旧版 Headless UI 依赖描述沿用到新版。
Reka UI
Radix Vue 更名后的 Vue 交互基础。
Vue / Nuxt
接入、定制与复用边界
- 定位
- Vue 无样式基元
- 接入方式
- 安装 reka-ui，组合对应的 Root、Trigger 和内容部件。
- 主题与定制
- 由应用提供 CSS，使用状态属性与 slots。
- 注意
- 目录中一些表单、日期和 Drawer 构件仍标记 Alpha；不能一概宣称稳定。
shadcn-svelte
在 Svelte 中持有组件源码并按项目需求修改。
Svelte / SvelteKit
接入、定制与复用边界
- 定位
- 可复制源码组件集合
- 接入方式
- 使用其 CLI / registry 或手动复制，并安装对应依赖。
- 主题与定制
- 直接编辑源码、主题变量和组件组合。
- 注意
- 属于社区 Svelte 实现，不能假定与 React shadcn/ui 版本或 API 同步。
Bits UI
提供日期、选择、命令、菜单和其他交互基础。
Svelte / SvelteKit
接入、定制与复用边界
- 定位
- Svelte 无样式组件
- 接入方式
- 安装 bits-ui，再组合部件并配置样式。
- 主题与定制
- Svelte snippets、状态与 CSS 自行控制呈现。
- 注意
- 日期值有其数据类型与国际化约束；不要把样式示例当作固定皮肤。
Skeleton
结合 Tailwind 主题、CSS 组件和框架交互组件。
React / Next.js、Svelte / SvelteKit
接入、定制与复用边界
- 定位
- 设计系统与框架组件
- 接入方式
- 根据框架选择安装路径及主题资源。
- 主题与定制
- 主题预设、CSS 变量、工具类和组件 slots。
- 注意
- CSS 组件与 React / Svelte 框架组件要分别看待；部分新功能标记 beta。
Angular Material
由 Angular 团队维护 Material 组件和 CDK。
Angular
接入、定制与复用边界
- 定位
- Angular 设计系统与组件基础
- 接入方式
- 按 Angular 版本接入 @angular/material 与 @angular/cdk。
- 主题与定制
- 主题 Token、组件 API、模板和 CDK 组合。
- 注意
- 官方站依赖客户端渲染；本次同时核对仓库的组件说明，CDK 不是完整视觉组件库。
PrimeNG
为 Angular 应用提供数据、表单与布局控件。
Angular
接入、定制与复用边界
- 定位
- Angular 组件套件
- 接入方式
- 按当前版本安装 PrimeNG 并配置主题与应用。
- 主题与定制
- 主题配置、模板与组件 API。
- 注意
- 核心与 PRO Suite 分开；具体版本及高级模块的许可证须按当前条款核对。
Web Awesome
从 Shoelace 发展而来的自定义元素组件库。
Web Components
接入、定制与复用边界
- 定位
- 标准 Web Components 套件
- 接入方式
- 通过包或 CDN 加载组件注册代码及主题。
- 主题与定制
- CSS 变量、parts、slots 与主题配置。
- 注意
- 免费组件、Pro 组件和模式的范围不同；框架事件与表单集成仍按文档处理。
Spectrum Web Components
以 LitElement 实现 Spectrum 设计语言。
Web Components
接入、定制与复用边界
- 定位
- Adobe Spectrum 的 Web Components
- 接入方式
- 按需安装并注册 @spectrum-web-components 的组件。
- 主题与定制
- 主题上下文、CSS 自定义属性和 slots。
- 注意
- 浏览器原生封装不等于无条件 SSR；Button 的链接属性正在弃用，应使用原生 anchor。
Ionic
提供移动应用常见导航、表单和覆盖层。
React / Next.js、Vue / Nuxt、Angular、Web Components
接入、定制与复用边界
- 定位
- 移动优先 Web 组件体系
- 接入方式
- 使用核心 Web Components 或 React / Vue / Angular 集成。
- 主题与定制
- 主题 CSS 变量、平台样式与组件属性。
- 注意
- 框架适配不等于原生 iOS 控件；ion-alert 是对话式提示，不应映射成内联 Alert。
TanStack Table
处理排序、筛选、分组、选择和列状态。
React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Angular、Solid
接入、定制与复用边界
- 定位
- 无头表格与数据网格引擎
- 接入方式
- 安装对应框架适配器或框架无关 core。
- 主题与定制
- 自行编写 HTML、样式、单元格渲染和应用状态。
- 注意
- 不提供现成可视数据网格；虚拟化与数据获取需要另配，最新主版本与旧示例 API 有差异。
TanStack Virtual
只渲染可见范围，降低长列表或网格的 DOM 成本。
React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Angular、Solid
接入、定制与复用边界
- 定位
- 无头虚拟化引擎
- 接入方式
- 选择对应框架适配器并测量滚动容器。
- 主题与定制
- 自行提供条目标记、尺寸测量、定位和样式。
- 注意
- 不是列表皮肤，也不负责远程分页；键盘焦点、读屏顺序和动态高度需产品验证。
Kobalte
为 Solid 应用提供表单、选择与覆盖层基础。
Solid
接入、定制与复用边界
- 定位
- Solid 无样式交互工具包
- 接入方式
- 安装 @kobalte/core，按官方组件部件组合。
- 主题与定制
- 由应用提供 CSS，使用组件状态属性。
- 注意
- Solid 版本兼容性按实际依赖核对；不把 React 组件直接视作 Solid 可用。
assistant-ui
覆盖线程、消息操作、分支、工具渲染与语音的聊天 UI。
React / Next.js、Vue / Nuxt
Ant Design X
React 对话、输入、思考链、建议、操作和来源组件。
React / Next.js
Prompt Kit
基于 shadcn/ui 的输入、消息、推理和工具 UI 构件。
React / Next.js
ElevenLabs UI
包含音频播放、波形、语音输入、转录和实时通话界面。
React / Next.js
Tambo
注册 React 组件和参数 schema，由 Agent 选择组件并流式填充。
React / Next.js
Lobe UI
提供聊天列表、输入、Markdown、Token 标签和通用组件。
React / Next.js
ChatUI
React 聊天容器、气泡与消息管理，兼顾移动端会话。
React / Next.js
NLUX
React 与普通 JavaScript 的 AI 聊天 UI，支持流式内容。
React / Next.js
Deep Chat
支持消息、文件、录音与语音能力的可定制聊天组件。
React / Next.js、Web Components
Streamdown
处理尚未闭合的 Markdown，并以插件提供代码、数学和图表渲染。
React / Next.js
AI Elements Vue
基于 shadcn-vue，提供会话、输入、来源、工具与计划组件。
Vue / Nuxt
Svelte AI Elements
基于 shadcn-svelte 的消息、会话、输入与推理 UI。
Svelte / SvelteKit
OpenAI ChatKit
嵌入式聊天 Web Component、React 绑定与交互 Widget 格式。
React / Next.js、Web Components
Lucide
遵循统一网格和笔触规则的 SVG 图标，提供静态资源与多个框架的官方包。
原生 JavaScript、React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Angular、Solid
接入、定制与复用边界
- 定位
- SVG 图标系统
- 接入方式
- 本站固定使用 lucide-static 1.66.0 的 2015 个本地图形；可通过 Icon API 或 SVG 使用。
- 主题与定制
- 调整 size、strokeWidth 和 currentColor；装饰与信息图标分别设置可访问语义。
- 注意
- 图形名称和英文用途标签来自固定版本；不把图标名称推断为中文语义，不使用图标字体，也不接受调用方原始 SVG。
Apache ECharts
基于 SVG 或 Canvas 的 JavaScript 图表引擎，覆盖坐标系、系列、提示、图例与数据更新。
原生 JavaScript
接入、定制与复用边界
- 定位
- 数据可视化引擎
- 接入方式
- 安装 echarts，或自行托管官方构建。本站的 Chart 固定使用本地 ECharts 6.1.0。
- 主题与定制
- 通过图表配置与主题控制系列、坐标轴和交互；本站暴露受约束的公共属性。
- 注意
- 原生 JavaScript 引擎不等于六种框架的原生组件。本站先提供折线、面积、柱状与单系列环图，未开放任意 ECharts 配置。
beUI
面向 React 的动效组件和图表，组件页把可操作示例、用法和源码放在一起。
React / Next.js
接入、定制与复用边界
- 定位
- 动效组件与图表
- 接入方式
- 通过 shadcn registry 或手动复制；React 组件使用 Motion 与 Tailwind CSS。
- 主题与定制
- 通过持有的源码、共享主题变量与动效规则修改外观和状态。
- 注意
- 免费库与 Pro 使用不同许可。本站参考其图表演示和动效原则，未复制 React 组件；本站 Chart 由 ECharts 驱动。
没有匹配的来源，试试其他生态或库名。