前端与 UI
TECH STACK开发技术栈Web 界面的框架、组件库、样式方案、状态管理与构建工具：从「页面怎么渲染」到「组件从哪来」，一页看完。
收录条目
94 条
按用途筛选，同类才可比
先按分类把范围缩到一类：框架与渲染、组件库与设计系统、状态与数据、富交互与可视化、Web 基础与协议；同一类里再比形态与许可证。
分类
5 个
按用途分组
适用场景
技术选型
先定位，再比同类
数据日期
2026-10-27
核对到这一天
口径边界
只比同类
跨类不横向比
筛选与排序
显示 94 / 94 条前端与 UI 对照表
第 2 / 4 页 · 共 94 条| 名称 | 分类 | 形态 | 一句话定位 | 亮点 / 热度 | 许可证 | 详情 |
|---|---|---|---|---|---|---|
| Mantine React 生态 · 开箱即用 | 组件库与设计系统 | 开箱即用的业务组件库 | 现代 React 应用组件库 | 组件与 Hooks 丰富，开发体验顺滑，适合快速搭建仪表盘和工具产品。 | — | 查看详情 |
| Mermaid / KaTeX / Shiki 开发者工作台内嵌组件 · 内容渲染层 | 组件库与设计系统 | 开发者工具内嵌组件 | 图表、数学公式与代码渲染 | 让 Agent 回复同时承载流程图、公式、代码高亮和文档内容，适合知识工作台和技术产… | — | 查看详情 |
| Monaco Editor 开发者工作台内嵌组件 · VS Code 同源编辑器内核 | 组件库与设计系统 | 开发者工具内嵌组件 | 浏览器内代码编辑器 | 语言服务、语法高亮、worker 和多语言编辑能力成熟，适合把代码工作区嵌入桌面客户… | — | 查看详情 |
| MSW MSW · 组件库与设计系统 | 组件库与设计系统 | 接口 mock 库 | 在请求层拦截并 mock | 用 Service Worker 或请求拦截在浏览器与 Node 里伪造接口，开发、… | MIT | 查看详情 |
| MUI React 生态 · Material Design | 组件库与设计系统 | 开箱即用的业务组件库 | 通用 React 组件库 | 组件覆盖广，Material 设计规范完整，MUI X 提供高级数据组件。 | — | 查看详情 |
| Naive UI Vue 3 生态 · TypeScript | 组件库与设计系统 | 开箱即用的业务组件库 | 现代 Vue 3 组件库 | 主题能力灵活，类型体验好，组件风格相对克制。 | — | 查看详情 |
| next-intl + next/font hao.ai 产品前端组合 · 国际化 · 自托管字体 | 组件库与设计系统 | 产品前端组合 | 多语言与字体加载 | 第一天使用 [locale] 路由段和自托管字体，减少后期迁移与首屏字体闪烁。 | — | 查看详情 |
| Next.js 16 App Router / RSC hao.ai 产品前端组合 · React 19 · SSR / BFF | 组件库与设计系统 | 产品前端组合 | 产品 Web 应用框架 | 以服务器组件、SSR 和文件路由组织内容、账号页、控制台和 BFF 转发。 | — | 查看详情 |
| NG-ZORRO Angular 生态 · Ant Design for Angular | 组件库与设计系统 | 官方体系组件库 | Angular 企业组件库 | 沿用 Ant Design 设计语言，适合已有 Ant 设计资产和中后台经验的团队。 | — | 查看详情 |
| NutUI 移动端 H5 / 小程序 · 京东 · Vue / React | 组件库与设计系统 | 移动端优先组件库 | 移动端与跨端组件 | 覆盖移动端常见业务组件，并对 Taro 等跨端路线有配套。 | — | 查看详情 |
| PostHog / Stripe.js hao.ai 产品前端组合 · 埋点 · 支付 | 组件库与设计系统 | 产品前端组合 | 产品分析与支付前端接入 | 把行为分析与支付跳转纳入产品层，同时保持支付确认和金额计算在服务端完成。 | — | 查看详情 |
| PrimeNG Angular 生态 · PrimeTek | 组件库与设计系统 | 官方体系组件库 | 功能丰富的 Angular 组件库 | 组件数量多，表格、树、图表周边和主题系统适合复杂后台。 | — | 查看详情 |
| Primer GitHub · 组件库与设计系统 | 组件库与设计系统 | 设计系统与组件库 | GitHub 官方的设计系统 | 组件与 GitHub 页面同源，代码浏览、版本差异、议题列表这类开发场景的控件现成可… | MIT | 查看详情 |
| PrimeVue Vue 3 生态 · 跨国际生态 | 组件库与设计系统 | 开箱即用的业务组件库 | 功能丰富的 Vue 组件集 | 覆盖组件多，数据表格、树、日历和主题能力强，适合复杂业务。 | — | 查看详情 |
| Quasar 小程序 / 跨端框架自带 · Vue · Web / Mobile / Desktop | 组件库与设计系统 | 端自带或跨端组件方案 | Vue 跨平台应用框架 | 同一套 Vue 代码可面向 Web、移动端和桌面端，并提供组件与构建能力。 | — | 查看详情 |
| Radix UI / Base UI React 生态 · Headless | 组件库与设计系统 | 开箱即用的业务组件库 | 无样式行为原语 | 无障碍、键盘交互、弹层和组合能力强，把行为和视觉完全分开。 | — | 查看详情 |
| React Aria Adobe · 组件库与设计系统 | 组件库与设计系统 | 无样式交互 Hooks | Adobe 出品的交互 Hooks 集 | 把焦点管理、键盘导航、屏幕阅读器语义这些易错细节封成 hooks，覆盖日期选择、组合… | Apache-2.0 | 查看详情 |
| react-hook-form + zod hao.ai 产品前端组合 · 表单 · Schema 校验 | 组件库与设计系统 | 产品前端组合 | 表单状态与输入校验 | 适合登录、团队设置、账单资料、OAuth 绑定和多步骤验证流程。 | — | 查看详情 |
| Recharts hao.ai 产品前端组合 · React 图表 | 组件库与设计系统 | 产品前端组合 | 业务数据可视化 | 适合推荐结算、用量、账单和运营数据的基础图表，能与 React 状态和响应式布局组合… | — | 查看详情 |
| Semi Design React 生态 · 字节跳动 | 组件库与设计系统 | 开箱即用的业务组件库 | React 企业组件库 | 中后台组件和设计能力完整，适合复杂表单、表格和运营系统。 | — | 查看详情 |
| Shadcn-Vue Vue 3 生态 · Tailwind · Reka UI | 组件库与设计系统 | 开箱即用的业务组件库 | 源码复制 / Headless 方案 | 源码可控，适合 Tailwind 设计系统和需要高度定制的产品。 | — | 查看详情 |
| shadcn/ui React 生态 · 源码复制 · Tailwind | 组件库与设计系统 | 开箱即用的业务组件库 | 可组合的源码方案 | 代码归项目所有，定制自由，与 Tailwind 和 AI 编程工作流结合紧密。 | — | 查看详情 |
| Shoelace Tailwind / Headless / 跨框架 · Web Components | 组件库与设计系统 | 样式工具 / 行为原语 | 框架无关 Web Components | 可在原生 HTML、React、Vue、Angular 等环境使用，适合跨团队共享基… | — | 查看详情 |
| sonner / cmdk / input-otp hao.ai 产品前端组合 · 反馈 · 命令面板 · 验证码 | 组件库与设计系统 | 产品前端组合 | 轻量交互组件组合 | 覆盖 Toast、命令面板和邮箱 / TOTP 验证码输入，补足产品级交互而不引入重… | — | 查看详情 |
| Storybook Storybook · 组件库与设计系统 | 组件库与设计系统 | 组件工作台 | 组件开发与文档工作台 | 把组件单独渲染出来开发、调试并写文档，支持交互测试与视觉回归；按状态逐个过一遍，不必… | MIT | 查看详情 |
| Style Dictionary Amazon（开源） · 组件库与设计系统 | 组件库与设计系统 | 设计令牌构建工具 | 把设计令牌编译成多端产物 | 用一份令牌定义导出 CSS 变量、各平台样式与主题文件，命名和层级由配置统一控制；改… | Apache-2.0 | 查看详情 |
| Tailwind CSS 前端 · 样式工具 | 组件库与设计系统 | 技术名词 | 以工具类组合为主的 CSS 框架 | 把常用样式能力变成可组合的工具类。 | — | 查看详情 |
| TanStack Query + zustand hao.ai 产品前端组合 · 服务端状态 · 客户端状态 | 组件库与设计系统 | 产品前端组合 | 数据获取与本地状态 | 把 API 缓存、失效、重试和跨组件 UI 状态分开，减少把所有数据塞进一个全局 S… | — | 查看详情 |
| Taro UI 小程序 / 跨端框架自带 · React · Taro | 组件库与设计系统 | 端自带或跨端组件方案 | React 跨端组件库 | 适合已有 React 团队进入小程序和多端开发，技术路线统一。 | — | 查看详情 |
| TDesign Mobile 移动端 H5 / 小程序 · Vue / React | 组件库与设计系统 | 移动端优先组件库 | 移动端设计系统 | 设计规范、主题和移动端交互较统一，适合大型产品团队。 | — | 查看详情 |
数据说明
收录规模94 个条目分 5 类，同类之间才可比
资料口径各项目官方文档与代码仓库以官方文档与仓库为准，只做中文整理
数据日期2026-10-27核对到这一天，官方改动以官方为准
口径边界只比同类跨类场景不同，不可直接比价与打分
常见问题
组件库、Headless 原语、样式工具能一起比吗？
不能。Ant Design / Element Plus 是开箱即用的业务组件库，Radix / Base UI 只提供行为与无障碍原语，Tailwind 是样式工具。前两类给你自由度但要自己写组件，第三类交付快但定制成本高。
框架和元框架（Next.js / Nuxt）是什么关系？
元框架在框架之上补了路由、渲染模式（SSR/SSG/RSC）与构建约定。选 React 但不选元框架，等于自己拼路由与构建；选 Next.js 则要接受它的约定与升级节奏。
条目信息取自各项目官方仓库与文档；定位、优势与注意事项为中文归纳，数值不改写，仓库地址、许可证与版本以官方为准。
