前端 UI 组件库
约 1302 字大约 4 分钟
2025-01-15
收集整理的各类前端 UI 组件库,包括 Vue、React 等框架的组件库。
Vue UI 组件库
通用 UI 组件库(PC/后台管理)
| 名称 | 官网 | 说明 |
|---|---|---|
| Element Plus | element-plus.org | Vue3 版 Element UI,后台管理常用 |
| Element UI | element.eleme.io | Vue2 版本,饿了么出品(维护模式) |
| Naive UI | naiveui.com | 全 TypeScript、风格简洁、可定制性强 |
| Arco Design Vue | arco.design/vue | 字节跳动出品,企业风格 |
| TDesign Vue | tdesign.tencent.com/vue | 腾讯出品,Vue2 & Vue3 都有 |
| Ant Design Vue | antdv.com | 企业级 UI 设计语言和组件库 |
| Vuetify | vuetifyjs.com | Material Design 风格,成熟稳定 |
| View UI Plus | iviewui.com | 基于 Vue3 的企业级 UI 组件库 |
移动端优先
| 名称 | 官网 | 说明 |
|---|---|---|
| Vant | vant-ui.github.io | 有 Vue2 和 Vue3 版本,小程序支持 |
| Varlet | varlet.dev | Material Design 风格的 Vue3 移动端组件库 |
| NutUI | nutui.jd.com | 京东出品,移动端专注 |
| Mand Mobile | mand-mobile.github.io | 蚂蚁金服早期移动端组件库(Vue2) |
| uView | uviewui.com | uni-app UI 组件库 |
| Wot Design Uni | wot-design-uni.github.io | 基于 Vue3+TS 的 uni-app 组件库 |
| Quasar Framework | quasar.dev | 一套代码可打包 H5、App、桌面端 |
基于 Tailwind CSS 的 UI 库
| 名称 | 官网 | 说明 |
|---|---|---|
| shadcn/ui | ui.shadcn.com | 现代化可复制粘贴组件库 |
| DaisyUI | daisyui.com | 基于 Tailwind CSS 的主题化 UI 组件 |
| Flowbite | flowbite.com | 基于 Tailwind CSS 的组件库 |
| Headless UI | headlessui.com | 无样式、可访问的 UI 组件 |
| Radix UI | radix-ui.com | 低级别、无样式、可访问的组件 |
| Windicss + Vue | windicss.org | 原子化 CSS + Vue |
| UnoCSS | uno.antfu.me | 下一代原子化 CSS,和 Vue 深度结合 |
创意/特殊风格 UI 库
| 名称 | 官网 | 说明 |
|---|---|---|
| UIverse | uiverse.io | 社区驱动的 UI 组件集合 |
| Magic UI | magicui.design | 现代化动画组件库 |
| Wired Elements | wiredjs.com | 手绘风格的 UI 组件库 |
| Vue Bits | vue-bits.dev | 炫酷的 Vue 动画组件集合 |
| BalmUI | material.balmjs.com | Material Design 风格,Vue3 支持 |
| Oruga UI | oruga.io | 无样式,可自定义主题 |
| PrimeVue | primevue.org | 功能丰富,包含 DataTable、日历、图表等 |
功能型/场景型组件库
| 名称 | 官网 | 说明 |
|---|---|---|
| VueUse | vueuse.org/zh | Vue Composition API 工具集 |
| Vue Chartkick | chartkick.com/vue | 简单封装的图表库 |
| Vue-ECharts | github.com/ecomfe/vue-echarts | ECharts 的 Vue 封装 |
| Vue Grid Layout | jbaysolutions.github.io/vue-grid-layout | 拖拽式网格布局 |
| Vue Draggable | github.com/SortableJS/Vue.Draggable | 基于 SortableJS 的拖拽排序 |
其他 Vue 生态
- Vue 相关工具组件 - Vue 生态系统的各种工具和组件
React UI 组件库
企业级组件库
| 名称 | 官网 | 说明 |
|---|---|---|
| Ant Design | ant.design | 蚂蚁金服出品,企业级 UI 设计语言 |
| Material-UI (MUI) | mui.com | Google Material Design 风格 |
| Chakra UI | chakra-ui.com | 简单、模块化、可访问的组件库 |
| Mantine | mantine.dev | 全功能 React 组件库,包含 100+ 组件 |
| NextUI | nextui.org | 现代化、快速、美观的 React UI 库 |
| Arco Design | arco.design | 字节跳动出品,支持 React |
| Semi Design | semi.design | 抖音团队出品 |
移动端 React 组件库
| 名称 | 官网 | 说明 |
|---|---|---|
| Ant Design Mobile | mobile.ant.design | Ant Design 移动端版本 |
| React Vant | react-vant.3lang.dev | Vant 的 React 版本 |
| React Native Elements | reactnativeelements.com | React Native 跨平台组件库 |
| NativeBase | nativebase.io | 移动端优先的组件库 |
Angular UI 组件库
| 名称 | 官网 | 说明 |
|---|---|---|
| Angular Material | material.angular.io | Angular 官方 Material Design 组件库 |
| NG-ZORRO | ng.ant.design | Ant Design 的 Angular 版本 |
| PrimeNG | primeng.org | 功能丰富的 Angular 组件库 |
| Clarity Design | clarity.design | VMware 出品的企业级 UI 框架 |
| Nebular | akveo.github.io/nebular | 基于 Eva Design System 的 Angular UI 库 |
跨框架/原生组件库
Web Components
| 名称 | 官网 | 说明 |
|---|---|---|
| Shoelace | shoelace.style | 基于 Web Components 的现代化组件库 |
| Fast | fast.design | 微软出品的 Web Components |
| Lit | lit.dev | Google 的 Web Components 框架 |
CSS 框架
| 名称 | 官网 | 说明 |
|---|---|---|
| Bootstrap | getbootstrap.com | 最流行的 CSS 框架 |
| Bulma | bulma.io | 基于 Flexbox 的现代 CSS 框架 |
| Foundation | get.foundation | 响应式前端框架 |
| Semantic UI | semantic-ui.com | 人性化的 HTML |
小程序组件库
| 名称 | 官网 | 说明 |
|---|---|---|
| WeUI | weui.io | 微信官方设计的基础样式库 |
| ColorUI | github.com/weilanwl/ColorUI | 鲜亮的高饱和色彩主题 |
| ThorUI | thorui.cn | 轻量、简洁的移动端组件库 |
| Vant Weapp | vant-contrib.gitee.io/vant-weapp | Vant 的小程序版本 |
| iView Weapp | weapp.iviewui.com | 高质量的微信小程序 UI 组件库 |
| Taro UI | taro-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
相关资源
- Awesome Vue - Vue 资源精选列表
- Awesome React - React 资源精选列表
- UI 组件库对比 - NPM 下载趋势对比
- 组件库性能对比 - 包大小分析工具
