我要评论本文作者：试者才子酒中仙 前端充电宝
radix ui 是一个开源的ui组件库，专为快速开发、易于维护和可访问性优化而设计。它是一个无样式的组件库，允许开发者完全控制组件的样式，同时提供了一套全面的ui组件和工具，帮助开发者构建美观、易于访问且具有高性能的应用。
在前端开发的过程中，ui 组件库扮演着至关重要的角色。它们不仅助力开发者迅速构建页面原型，还能确保页面风格的统一性，从而显著提升开发效率。本文就来盘点那些前端领域广泛认可且常用的 ui 组件库，为开发者提供参考。
图片
web
react
ant design
ant design是一个基于 react 的企业级ui设计语言和组件库，旨在统一中台项目的前端ui设计，提高设计和开发效率。它提供了一系列高质量的组件，支持自定义主题和国际化，注重无障碍设计，拥有活跃的社区支持，特别适合于构建高度定制化的企业级中后台系统。
图片
github：github - ant-design/ant-design: an enterprise-class ui design language and react ui library
material ui
material ui是一款遵循google material design规范的react ui组件库，提供了丰富、高质量的ui组件和样式，支持高度定制，并拥有庞大的社区支持，帮助开发者快速创建现代化、美观的web应用。
图片
github：https://github.com/mui/material-ui
chakra ui
chakra ui是一个基于react的开源ui组件库，以其易用性、可访问性、响应式设计和灵活性著称，旨在帮助开发者快速构建现代且可访问的用户界面。它提供了丰富的可定制组件，支持暗黑模式，并拥有完善的文档和活跃的社区支持。
图片
github：https://github.com/chakra-ui/chakra-ui
mantine
mantine是一个基于react的开源ui框架，它提供了一套现代化、可定制且易于使用的组件库，旨在帮助开发者高效构建美观且功能丰富的web应用。mantine注重简洁的api设计、良好的可访问性以及灵活的主题定制。
图片
github：https://github.com/mantinedev/mantine
nextui
nextui是一个漂亮、快速、现代化的基于 react ui 组件库，专为简化开发流程和提升用户体验而设计。它基于tailwind css和react aria开发，提供了丰富的组件和工具，以帮助开发者构建美观、易用和可访问的用户界面。
图片
github：https://github.com/nextui-org/nextui
vue
element ui
element ui 是一套基于 vue 2.0 的桌面端组件库，由饿了么前端团队开发和维护。它为开发者提供了一套丰富、高质量的ui组件，旨在帮助开发者快速构建美观、易用的 web 应用。
图片
github：https://github.com/elemefe/element
ant design of vue
ant design of vue 是一个基于vue.js的ui组件库，受到流行react组件库ant design的启发，将其设计思想和功能移植到了vue平台，旨在为开发者提供一套丰富、美观、易用的vue ui组件，以帮助快速构建高质量的web应用。
图片
github：https://github.com/vuecomponent/ant-design-vue/
vuetify
vuetify 是一个基于 vue 的开源 ui 库，遵守 google 的 material design 规范，提供了一套响应式、语义化的组件，旨在帮助开发者快速构建现代化的web应用。
图片
github：https://github.com/vuetifyjs/vuetify
element plus
element plus 是一套由社区维护的为构建基于vue 3的组件库而设计的ui组件库，它提供完整的类型定义文件，使用 vue 3.0 composition api 降低耦合、简化逻辑，使用 lerna 维护和管理项目，完善了 52 种国际化语言支持。
图片
github：https://github.com/element-plus/element-plus
naive ui
naive ui是一个基于vue 3.0/typescript的开源前端ui组件库，旨在简化开发流程并提升用户体验。它提供了超过70个常用业务组件，支持按需引入和高性能的tree shaking。此外，naive ui还拥有先进的类型安全主题系统和活跃的社区支持，使开发者能够快速构建美观、易用且可访问的用户界面。
图片
primevue
primevue是一个基于vue 3的下一代开源ui组件库，提供了90多个高质量的组件，支持响应式设计、定制化主题、国际化等功能。它旨在帮助开发者快速构建网站和应用程序，同时提供强大的定制能力和全面的图标库，以满足不同项目的需求。
图片
github：https://github.com/primefaces/primevue
angular
material design for angular
material design for angular 是 angular 官方出品的组件库，基于 material design 设计体系，为 angular 开发者提供了丰富的ui组件，以构建现代化的web应用。
图片
github：https://github.com/angular/components
ng-zorro
ng-zorro-antd 是一个基于 ant design 设计规范的 angular ui 组件库，旨在帮助开发者快速构建企业级中后台应用。它提供了丰富的高质量组件，支持国际化和主题定制，与 angular 保持同步升级，并兼容现代浏览器。
图片
github：https://github.com/ng-zorro/ng-zorro-antd
移动端
多平台
vant
vant 是一个轻量、可定制的移动端组件库，提供了 vue 2、vue 3 和微信小程序版本，并由社区团队维护 react 版本。它拥有80+个高质量组件，覆盖移动端主流场景，具备极佳的性能，平均体积小于 1kb(min+gzip)。vant使用typescript编写，单元测试覆盖率超过 90%，并提供丰富的中英文文档和设计资源。此外，它还支持主题定制、按需引入、tree shaking、无障碍访问、深色模式、服务器端渲染以及国际化等功能。
图片
- github：https://github.com/youzan/vant
- github（react）：https://github.com/3lang3/react-vant
taro ui
taro ui 是一款基于 taro 框架开发的多端 ui 组件库，一套组件可以在 微信小程序，支付宝小程序，百度小程序，h5，reactnative 多端适配运行，提供友好的 api，可灵活的使用组件。
图片
github：https://github.com/nervjs/taro-ui
react native elements
react native elements 是一个跨平台的ui组件库，旨在帮助开发者快速构建出美观的应用程序，同时节省开发时间。它支持android、ios和web平台，并且完全用typescript编写，支持expo。
图片
github：https://github.com/react-native-elements/react-native-elements
uview
uview ui 是一个专为 uniapp 设计的高性能、全面的 ui 框架和工具集，它是 uni-app 生态中优秀的 ui 框架之一。
图片
github：https://github.com/umicro/uview
wot design uni
wot design uni 是一个基于vue3+ts开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。
图片
github：https://github.com/moonofweisheng/wot-design-uni
h5
ant design mobile
ant design mobile 是一个基于 react 的移动端 ui 组件库，它提供了一系列高质量的组件，旨在帮助开发者快速构建美观且具有良好用户体验的移动应用。
图片
github：https://github.com/ant-design/ant-design-mobile
varlet
varlet 是一个基于 vue.js 的移动端 ui 组件库，提供了一系列高质量、响应式、国际化的组件，以帮助开发者快速构建企业级应用。它具有灵活的主题定制功能和良好的性能，易于集成到现有项目中。
图片
github：https://github.com/varletjs/varlet
小程序
vant weapp
vant 的微信小程序版本。
图片
github：github - youzan/vant-weapp: 轻量、可靠的小程序 ui 组件库
iview weapp
iview weapp 是一套高质量的微信小程序 ui 组件库。
图片
github：https://github.com/talkingdata/iview-weapp
weui
weui 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素。
图片
github：https://github.com/tencent/weui-wxss
其他
tailwind css
shadcn/ui
shadcn/ui 是一个爆火的开源ui组件库，它允许用户将单个ui组件的源代码直接下载到项目中，提供了更大的灵活性和定制空间。它不是一个传统的组件库，而是一个可以复制并粘贴到应用中的可重用组件的集合。
图片
github：https://github.com/shadcn-ui/ui
daisyui
daisyui 是一个基于 tailwind css 构建的开源 ui 组件库，旨在简化web应用和网站的开发过程。它提供了大量预设计的组件，如按钮、表单、对话框等。
图片
github：https://github.com/saadeghi/daisyui
flowbite
flowbite 是一个开源的 ui 组件库，支持在多个前端框架中使用，它基于 tailwind css 构建，旨在帮助开发者更快速地构建网站。flowbite可以作为tailwind css项目的插件使用，提供一系列预先构建的web组件，这些组件利用tailwind css的实用类来工作，从而加速开发过程。
图片
github：https://github.com/themesberg/flowbite
无样式
headless ui
headless ui 是一组完全无样式、完全可访问的 ui 组件，支持在 react 和 vue 中使用，旨在与 tailwind css 完美集成。它强调只负责组件的状态及交互逻辑，而不管标签和样式。这种设计理念的核心在于关注点分离，即将组件的“状态及交互逻辑”和“ui展示层”实现解耦。
图片
github：https://github.com/tailwindlabs/headlessui
radix ui
radix ui 是一个开源的ui组件库，专为快速开发、易于维护和可访问性优化而设计。它是一个无样式的组件库，允许开发者完全控制组件的样式，同时提供了一套全面的ui组件和工具，帮助开发者构建美观、易于访问且具有高性能的应用。
图片
发表评论