web-tools

外观

前端 UI 组件库

约 1302 字大约 4 分钟

2025-01-15

收集整理的各类前端 UI 组件库，包括 Vue、React 等框架的组件库。

Vue UI 组件库

通用 UI 组件库（PC/后台管理）

名称官网说明
Element Pluselement-plus.orgVue3 版 Element UI，后台管理常用
Element UIelement.eleme.ioVue2 版本，饿了么出品（维护模式）
Naive UInaiveui.com全 TypeScript、风格简洁、可定制性强
Arco Design Vuearco.design/vue字节跳动出品，企业风格
TDesign Vuetdesign.tencent.com/vue腾讯出品，Vue2 & Vue3 都有
Ant Design Vueantdv.com企业级 UI 设计语言和组件库
Vuetifyvuetifyjs.comMaterial Design 风格，成熟稳定
View UI Plusiviewui.com基于 Vue3 的企业级 UI 组件库

移动端优先

名称官网说明
Vantvant-ui.github.io有 Vue2 和 Vue3 版本，小程序支持
Varletvarlet.devMaterial Design 风格的 Vue3 移动端组件库
NutUInutui.jd.com京东出品，移动端专注
Mand Mobilemand-mobile.github.io蚂蚁金服早期移动端组件库（Vue2）
uViewuviewui.comuni-app UI 组件库
Wot Design Uniwot-design-uni.github.io基于 Vue3+TS 的 uni-app 组件库
Quasar Frameworkquasar.dev一套代码可打包 H5、App、桌面端

基于 Tailwind CSS 的 UI 库

名称官网说明
shadcn/uiui.shadcn.com现代化可复制粘贴组件库
DaisyUIdaisyui.com基于 Tailwind CSS 的主题化 UI 组件
Flowbiteflowbite.com基于 Tailwind CSS 的组件库
Headless UIheadlessui.com无样式、可访问的 UI 组件
Radix UIradix-ui.com低级别、无样式、可访问的组件
Windicss + Vuewindicss.org原子化 CSS + Vue
UnoCSSuno.antfu.me下一代原子化 CSS，和 Vue 深度结合

创意/特殊风格 UI 库

名称官网说明
UIverseuiverse.io社区驱动的 UI 组件集合
Magic UImagicui.design现代化动画组件库
Wired Elementswiredjs.com手绘风格的 UI 组件库
Vue Bitsvue-bits.dev炫酷的 Vue 动画组件集合
BalmUImaterial.balmjs.comMaterial Design 风格，Vue3 支持
Oruga UIoruga.io无样式，可自定义主题
PrimeVueprimevue.org功能丰富，包含 DataTable、日历、图表等

功能型/场景型组件库

名称官网说明
VueUsevueuse.org/zhVue Composition API 工具集
Vue Chartkickchartkick.com/vue简单封装的图表库
Vue-EChartsgithub.com/ecomfe/vue-echartsECharts 的 Vue 封装
Vue Grid Layoutjbaysolutions.github.io/vue-grid-layout拖拽式网格布局
Vue Draggablegithub.com/SortableJS/Vue.Draggable基于 SortableJS 的拖拽排序

其他 Vue 生态

React UI 组件库

企业级组件库

名称官网说明
Ant Designant.design蚂蚁金服出品，企业级 UI 设计语言
Material-UI (MUI)mui.comGoogle Material Design 风格
Chakra UIchakra-ui.com简单、模块化、可访问的组件库
Mantinemantine.dev全功能 React 组件库，包含 100+ 组件
NextUInextui.org现代化、快速、美观的 React UI 库
Arco Designarco.design字节跳动出品，支持 React
Semi Designsemi.design抖音团队出品

移动端 React 组件库

名称官网说明
Ant Design Mobilemobile.ant.designAnt Design 移动端版本
React Vantreact-vant.3lang.devVant 的 React 版本
React Native Elementsreactnativeelements.comReact Native 跨平台组件库
NativeBasenativebase.io移动端优先的组件库

Angular UI 组件库

名称官网说明
Angular Materialmaterial.angular.ioAngular 官方 Material Design 组件库
NG-ZORROng.ant.designAnt Design 的 Angular 版本
PrimeNGprimeng.org功能丰富的 Angular 组件库
Clarity Designclarity.designVMware 出品的企业级 UI 框架
Nebularakveo.github.io/nebular基于 Eva Design System 的 Angular UI 库

跨框架/原生组件库

Web Components

名称官网说明
Shoelaceshoelace.style基于 Web Components 的现代化组件库
Fastfast.design微软出品的 Web Components
Litlit.devGoogle 的 Web Components 框架

CSS 框架

名称官网说明
Bootstrapgetbootstrap.com最流行的 CSS 框架
Bulmabulma.io基于 Flexbox 的现代 CSS 框架
Foundationget.foundation响应式前端框架
Semantic UIsemantic-ui.com人性化的 HTML

小程序组件库

名称官网说明
WeUIweui.io微信官方设计的基础样式库
ColorUIgithub.com/weilanwl/ColorUI鲜亮的高饱和色彩主题
ThorUIthorui.cn轻量、简洁的移动端组件库
Vant Weappvant-contrib.gitee.io/vant-weappVant 的小程序版本
iView Weappweapp.iviewui.com高质量的微信小程序 UI 组件库
Taro UItaro-ui.jd.com基于 Taro 框架的多端 UI 组件库

选择建议

企业后台管理系统

  • Vue: Element Plus、Ant Design Vue、Arco Design Vue
  • React: Ant Design、Arco Design、Semi Design

移动端应用

  • Vue: Vant、NutUI
  • React: Ant Design Mobile
  • 跨平台: uni-app + uView、Taro + Taro UI

个人项目/快速原型

  • Vue: Naive UI、Vuetify
  • React: Chakra UI、Mantine
  • CSS: Tailwind CSS + DaisyUI

设计风格需求

  • Material Design: Vuetify (Vue)、MUI (React)
  • 企业风格: Ant Design 系列
  • 简约现代: Naive UI、Chakra UI
  • 个性化: Wired Elements、Magic UI

相关资源