全网开源前端 UI 组件库 · 风格 · Admin 二开调研图谱

覆盖 React / Vue / Angular / Svelte / Solid / 移动跨端 / CSS 框架的主流开源组件库,Admin 二开模板直接内嵌在对应组件库卡片中,另有 12 种设计风格实况演示与持续收集渠道。一条筛选栏 + 一次搜索即可触达全部内容。

⭐ 默认按 Star 数降序排列(约数,截至 2026-10) 🧩 组件库与 Admin 二开合并为一张图谱 🎨 12 种风格纯 CSS 实况演示 📦 自包含单文件 · 离线可用
0个组件库 / 框架卡片
0个 Admin 二开模板(内嵌)
0种设计风格演示
0个持续收集渠道
0个可跳转开源链接
01

开源 UI 组件库全景 · 含 Admin 二开

组件库与基于它二次开发的 Admin 后台模板合并在同一张图谱里:每个库的卡片内直接列出可用的 Admin 二开(名称 · 技术栈 · ⭐ · Demo 链接),不再单独分章节。卡片默认按 ⭐ Star 数降序排列;筛选与搜索为原地切换,无论滚到多深位置都不会跳走。

没有匹配的卡片,换个关键词试试
02

前端 UI 设计风格 · 实况演示

12 种影响组件库视觉语言的设计风格,每个卡片内的搜索框 / 按钮 / 卡片均为纯 CSS 实况渲染(非截图),可直接对照选风格。趋势参考 UX Planet / Tubik 等对 2020s 风格演进的梳理:拟物 → 扁平 → 新拟态 → 玻璃拟态 → 新残酷主义 → Bento。

03

从哪里持续收集这些系统

要"全网收集",靠的不是一次性的盘点文章,而是下面这些可持续刷新的渠道:GitHub 话题页 + Awesome 清单看广度,BestofJS / Rising Stars / npm Trends 看热度与真实使用,组件画廊与设计社区看风格。

04

选型速查

按团队与场景给一条主线推荐 + 备选,避免在 60+ 个库里迷路。

场景主线推荐备选 / 说明
国内企业中后台(React)Ant Design + Ant Design Pro组件最全、中文文档、Pro 开箱即用;追求现代感换 shadcn/ui + shadcn-admin
国内企业中后台(Vue)Element Plus / Naive UI + Vben / soybean-admin / pure-adminVben v5 一套代码支持三种 UI 库;soybean-admin 工程化口碑最佳
现代设计感 · 个人产品 · 出海shadcn/ui(React)/ shadcn-vue / shadcn-svelte + Tailwind代码复制进项目、完全可控;配 Magic UI / Aceternity 加动效
数据仪表盘 / BITremor / Mantine + shadcn-admin图表优先选 Tremor;Bootstrap 系用 Tabler
移动端 H5Vant(Vue)/ Ant Design Mobile(React)京东系 NutUI;关注小程序则 TDesign / Vant Weapp
跨端(小程序 / App / 桌面)uni-app(国内)/ Taro(React 语法)Web 技术栈跨 iOS/Android 用 Ionic;一套 Vue 代码全平台用 Quasar
快速搭建 CRUD 后台refine / react-admin(React 框架)接 REST / GraphQL / Supabase 即生成增删改查,省去模板式二开
Angular 企业项目ng-zorro-antd + ng-alain组件丰富度选 PrimeNG;Material 路线用 Angular Material