UI 组件库推荐

yzqdev2026/7/15大约 2 分钟

UI 组件库推荐

Vue 组件库

库名	版本	特点	推荐指数
Element Plus	Vue 3	企业级，组件丰富，文档完善，中文友好	⭐⭐⭐⭐⭐
Element UI	Vue 2	Element Plus 的 Vue 2 版本	⭐⭐⭐⭐
Ant Design Vue	Vue 3	遵循 Ant Design 设计规范	⭐⭐⭐⭐⭐
Naive UI	Vue 3	轻量，TypeScript 支持好，按需加载	⭐⭐⭐⭐⭐
Vuetify	Vue 3	Material Design 风格，功能丰富	⭐⭐⭐⭐
Quasar	Vue 3	跨平台（Web/移动端/桌面），含 CLI	⭐⭐⭐⭐⭐
Arco Design	Vue 3	字节跳动出品，设计规范	⭐⭐⭐⭐
PrimeVue	Vue 3	功能丰富，主题系统强大	⭐⭐⭐⭐
Radix Vue	Vue 3	无样式，可定制性强	⭐⭐⭐⭐
Varlet	Vue 3	Material Design 风格，轻量	⭐⭐⭐
NutUI	Vue 3	京东出品，移动端优先	⭐⭐⭐
Vant	Vue 3	移动端 UI 库，轻量高效	⭐⭐⭐⭐
IDUX	Vue 3	企业级中后台组件库	⭐⭐⭐
Vue DevUI	Vue 3	华为开源，基于 DevUI 设计	⭐⭐⭐
Keen UI	Vue 2	轻量级 UI 组件	⭐⭐

React 组件库

库名	特点	推荐指数
Ant Design	企业级，组件最全，中文友好	⭐⭐⭐⭐⭐
MUI (Material UI)	Material Design 风格，生态完善	⭐⭐⭐⭐⭐
Mantine	现代，Hooks 丰富，可定制性强	⭐⭐⭐⭐⭐
shadcn/ui	基于 Radix，非组件库而是代码集合	⭐⭐⭐⭐⭐
Radix UI	无样式，无障碍，可定制	⭐⭐⭐⭐
Chakra UI	简洁，主题系统完善	⭐⭐⭐⭐
NextUI	现代，美观，基于 Tailwind	⭐⭐⭐⭐
PrimeReact	功能丰富，主题多样	⭐⭐⭐⭐
Arco Design	字节跳动出品，设计规范	⭐⭐⭐⭐
RSuite	企业级中后台	⭐⭐⭐
React Bootstrap	Bootstrap 风格	⭐⭐⭐
Evergreen	Segment 出品，简洁	⭐⭐⭐
Fluent UI	微软出品，Office 风格	⭐⭐⭐
Geist UI	Vercel 风格，极简	⭐⭐⭐
Grommet	可访问性优先	⭐⭐
Elastic UI	Elastic 出品	⭐⭐

移动端组件库

Vant - 有赞出品，Vue 移动端（推荐）
Ant Design Mobile - Ant Design 移动版
NutUI React - 京东移动端 React 版
React Vant - Vant 的 React 实现
TDesign - 腾讯出品，移动端/桌面端
Taro UI - 多端统一 UI（Taro 框架）

Web Components

xy-ui - 原生 Web Components 组件库

组件库使用技巧

Ant Design Vue - Select 占位符不显示

// ❌ 空字符串或 null 时 placeholder 不显示
initialValue: ''

// ✅ 使用 undefined
initialValue: undefined

Element UI - Checkbox 传递额外参数

<el-checkbox
  :disabled="scope.row.disable"
  v-model="scope.row.cashStatus"
  @change="checked => checkRow(checked, scope.row)"
/>

<script>
methods: {
  checkRow(checked, row) {
    console.log(`checked: ${checked}`);
    console.log(`row: ${JSON.stringify(row)}`);
  },
},
</script>

Emotion + Ant Design 覆盖样式

import styled from '@emotion/styled';

const DarkHoverStyle = styled(Icon)`
  color: gray;
  :hover {
    color: palevioletred;
  }
`;

const GlobalStyle = createGlobalStyle`
  .ant-tooltip-inner {
    background-color: palevioletred;
    color: black;
  }
`;

播放器组件

ArtPlayer - 现代化视频播放器
DPlayer - 弹幕视频播放器
Plyr - 简洁视频/音频播放器
hls.js - HLS 协议播放

其他工具

console-feed - 在页面中显示 console 输出
Monaco Editor - VS Code 编辑器内核

UI 组件库推荐

详情