uiUI 组件系统
对比

从 awesome list，查回官方实现。

9 份发现清单，45 个来源，73 个语义条目，187 条实现映射。

清单帮助发现候选，官方文档确认它提供什么。被 awesome list 收录不等于流行度、质量或无障碍认证；没有把 stars 当作用户数。

读过哪些清单

Awesome React Components

react

从组件套件与按功能分类的条目发现候选，再核对官方目录；列表中的旧项目不自动入选。

Awesome Vue

vue

覆盖 Vue 组件套件、独立控件和表格工具；旧 Vue 2 条目与当前 Vue 3 实现分别判断。

Awesome Svelte

svelte

发现 shadcn-svelte、Skeleton 等候选；Bits UI 进一步沿 shadcn-svelte 的基础依赖核验。

Awesome Angular

angular

实际入口为 PatrickJS/awesome-angular，包含 Angular Material、PrimeNG 和其他 Angular 工具。

Awesome Web Components

web-components

区分 Web Components 编译工具、组件套件和设计系统；沿 Web Awesome、Spectrum 等条目核对。

Awesome UI Libraries

通用库、AI 组件与源码分发

已读组件与库清单；找到 Prompt Kit、ElevenLabs、assistant-ui。作者偏好分数不作为本图鉴排名。

Awesome Generative UI

生成式 UI、组件、渲染器与协议

已读分类与条目；由此发现 Vue/Svelte 移植、Tambo、ChatKit 等。收录本身不证明采用度。

Generative UI landscape

研究、SDK、协议与组件目标

已读实际目录；用于补全层次，避免把协议、应用生成器和组件库混算。

AI-native design systems

AI 设计系统与聊天组件

已读 README 和 TABLE.md；发现 assistant-ui、Lobe UI、ChatUI、Ant Design X、ElevenLabs UI。逐项回到官方资料核对。

生态覆盖矩阵

下面表示来源支持的生态。具体组件、版本与适配器仍以对应官方文档为准；基础引擎不等于安装即用的视觉组件。

来源原生 JavaScriptReact / Next.jsVue / NuxtSvelte / SvelteKitAngularWeb ComponentsSolid条目
shadcn/ui未列✓未列未列未列未列未列8
MUI未列✓未列未列未列未列未列7
Ant Design未列✓未列未列未列未列未列6
AI Elements未列✓未列未列未列未列未列11
CopilotKit未列✓未列未列未列未列未列6
Radix Primitives未列✓未列未列未列未列未列7
React Aria未列✓未列未列未列未列未列3
Chakra UI未列✓未列未列未列未列未列1
Mantine未列✓未列未列未列未列未列4
Base UI未列✓未列未列未列未列未列2
Headless UI未列✓✓未列未列未列未列1
Ark UI未列✓✓✓未列未列✓1
Element Plus未列未列✓未列未列未列未列33
Naive UI未列未列✓未列未列未列未列1
PrimeVue未列未列✓未列未列未列未列2
Vuetify未列未列✓未列未列未列未列1
Nuxt UI未列未列✓未列未列未列未列3
Reka UI未列未列✓未列未列未列未列1
shadcn-svelte未列未列未列✓未列未列未列2
Bits UI未列未列未列✓未列未列未列8
Skeleton未列✓未列✓未列未列未列4
Angular Material未列未列未列未列✓未列未列2
PrimeNG未列未列未列未列✓未列未列1
Web Awesome未列未列未列未列未列✓未列1
Spectrum Web Components未列未列未列未列未列✓未列1
Ionic未列✓✓未列✓✓未列2
TanStack Table未列✓✓✓✓未列✓1
TanStack Virtual未列✓✓✓✓未列✓1
Kobalte未列未列未列未列未列未列✓1
assistant-ui未列✓✓未列未列未列未列10
Ant Design X未列✓未列未列未列未列未列9
Prompt Kit未列✓未列未列未列未列未列3
ElevenLabs UI未列✓未列未列未列未列未列5
Tambo未列✓未列未列未列未列未列2
Lobe UI未列✓未列未列未列未列未列2
ChatUI未列✓未列未列未列未列未列1
NLUX未列✓未列未列未列未列未列2
Deep Chat未列✓未列未列未列✓未列3
Streamdown未列✓未列未列未列未列未列2
AI Elements Vue未列未列✓未列未列未列未列11
Svelte AI Elements未列未列未列✓未列未列未列4
OpenAI ChatKit未列✓未列未列未列✓未列6
Lucide✓✓✓✓✓未列✓1
Apache ECharts✓未列未列未列未列未列未列1
beUI未列✓未列未列未列未列未列1

协议、迁移与边界

Shoelace 迁移公告

web-components

官方已声明停止活跃开发，后续工作转向 Web Awesome；作为历史来源保留，不重复计为活跃组件库。

A2UI

声明式 UI 描述格式与渲染器

Agent 发送 JSON，客户端映射到允许的本地组件。它不是一套通用视觉组件；协议版本和渲染器兼容性需分别核对。

AG-UI

Agent 与界面的事件协议

标准化消息、工具调用与共享状态等事件；它不规定按钮和消息气泡外观，因此不计入组件实现来源。

AI Elements 迁移入口

旧 AI SDK Elements 与当前 shadcn/ui 模式

旧站宣布 2026 年 11 月底弃用。当前官方迁移表已可读；旧副本继续工作，Vue/Svelte 社区移植不自动同步迁移。

补充候选的官方核验

Deep Chat、Nuxt UI Chat、NLUX

这些候选通过官方文档直接核验，未确认被上述四个列表收录；对应来源的 discovery 留空。

Nuxt UI 的聊天组件

Vue 消息、聊天列表与输入

ChatMessage 支持 AI SDK parts 和消息操作，复用通用目录的 nuxt-ui 来源，不再按同一仓库新增一套库计数。

来源证据怎么读

每个库入口给出核验日期、官方文档、仓库或维护证据，以及能追溯的发现清单。无样式原语、完整组件库、Agent UI、生成式 UI 和传输协议分别标注。社区移植不是上游官方适配。

本次覆盖 原生 JavaScript、React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Angular、Web Components、Solid，仍不承诺穷尽全部前端库。用途、交互差异和演示由本站归纳；官方提供和需组合实现的能力分开记录。

按用途浏览组件