跳到主要内容
挑组件 PickUIby JarinHe
专题登录

通用基础组件库推荐

按钮、表单、弹窗这类每个项目都要用的基础组件,适合从零搭产品界面。

共 17 个 · 由 JarinHe 人工挑选,附真实截图和点评

AWC UI

免费

一套代码跑遍五大框架的 MD3 组件库

喜欢 material design 风格的话 可以试试

JarinHe 的点评

最适合 通用基础组件 / 中后台MD3 · 跨框架

React / Angular / Vue / Svelte / HTML · Material官网

zard/ui

免费

Angular 的 shadcn 式组件库

简约的 Linear 类似风格,去年建立的仓库,目前还在更新

JarinHe 的点评

最适合 通用基础组件Angular · shadcn

Angular · Tailwind官网

HextaUI

第 3 期免费 + Pro

给 AI 产品用的 shadcn 组件库

免费的组件也够用,Pro 不建议了

JarinHe 的点评

最适合 AI 界面 / 通用基础组件AI界面 · shadcn

React · Tailwind官网

Kumo UI

免费

Cloudflare 出品的 React 组件库

Cloudflare出品,试试

JarinHe 的点评

最适合 中后台 / 通用基础组件中后台 · 仪表盘

React · Tailwind官网

Solid Glass

第 3 期免费

为 AI 应用打造的玻璃质感设计系统

UmamiBar 软件就是复刻的这个组件库的玻璃质感效果、

JarinHe 的点评

最适合 AI 界面 / 通用基础组件AI界面 · 玻璃质感

React · [待确认]官网

Chakra UI

免费 + Pro

简单、模块化且无障碍的 React 组件系统

40K Star 的老牌组件库

JarinHe 的点评

最适合 通用基础组件React · 无障碍

React · CSS-in-JS官网

ReUI

免费 + Pro

shadcn 生态里的后台组件仓库

做后台最省事的一套:Data Grid、Gantt、Kanban 这些 shadcn 里没有的组件,都做成了带真实仪表盘布局的示例,复制就能改。

JarinHe 的点评

最适合 中后台 / 通用基础组件1264 个示例 · Data Grid / Kanban

React · Radix / Base UI · Tailwind官网

coss ui

免费

直接拼出 AI 聊天 / 助手界面

做 AI 产品直接用它的 Composer,对话界面不用从零写。

JarinHe 的点评

最适合 AI 界面 / 通用基础组件Base UI 原语 · 56 组件

React · Base UI · Tailwind官网

Great UI

免费

无障碍优先,复制粘贴就能用

对无障碍有要求的项目可以先看它,暗色主题也省心。

JarinHe 的点评

最适合 通用基础组件亮暗主题 · 50+ 组件

React · Tailwind官网

shadcn/ui

免费

源码复制进项目,样式完全自己掌控

不知道选什么的 React 项目,先从它开始。

JarinHe 的点评

最适合 通用基础组件源码归你 · CLI 安装

React · Radix · Tailwind官网

Mantine

免费

组件 + hooks 的一站式全家桶

不想东拼西凑的话,一个库基本够用。

JarinHe 的点评

最适合 通用基础组件 / 中后台100+ 组件 · 50+ hooks

React · CSS Modules官网

Naive UI

免费

主题可调、全 TypeScript 的 Vue 组件

喜欢暗色风格又用 TS 的 Vue 开发者会喜欢。

JarinHe 的点评

最适合 中后台 / 通用基础组件暗色主题 · 无需引 CSS

Vue · CSS-in-JS官网

Vuetify

免费

Material Design 风格的 Vue 全家桶

想要 Google Material 风格就选它。

JarinHe 的点评

最适合 通用基础组件布局系统 · 社区成熟

Vue · Material官网

Skeleton

免费

用设计令牌一键切换整套主题

Svelte 项目想快速换主题可以试试。

JarinHe 的点评

最适合 通用基础组件Tailwind 原生 · 主题生成器

Svelte / React · Tailwind官网

Svelte 版的 shadcn/ui

用 Svelte 又羡慕 shadcn 的,直接用这个。

JarinHe 的点评

最适合 通用基础组件Svelte 5 · 源码归你

Svelte · Bits UI · Tailwind官网

Angular 官方维护的 Material 组件

Angular 项目的稳妥选择,官方维护。

JarinHe 的点评

最适合 通用基础组件CDK · 无障碍

Angular · Material官网

HeroUI

免费 + Pro

React Aria + Tailwind 的现代组件库

还没点评这个库,先看看截图

JarinHe 的点评

最适合 通用基础组件无障碍 · Tailwind v4

React · React Aria · Tailwind官网

怎么选:17 个通用基础组件库速览

  1. AWC UI:一套代码跑遍五大框架的 MD3 组件库。适合多框架团队或企业中后台,想统一用一套 Material 3 组件。 免费
  2. zard/ui:Angular 的 shadcn 式组件库。适合用 Angular 又想要 shadcn 体验的团队,源码全量归自己。 免费
  3. HextaUI:给 AI 产品用的 shadcn 组件库。适合做 AI 聊天、Agent 界面的 React 团队,流式与审批态开箱即用。 免费 + Pro
  4. Kumo UI:Cloudflare 出品的 React 组件库。适合做 SaaS、中后台与数据类产品界面。 免费 · MIT
  5. Solid Glass:为 AI 应用打造的玻璃质感设计系统。适合做 AI 聊天/智能体界面的开发者。 免费 · MIT
  6. Chakra UI:简单、模块化且无障碍的 React 组件系统。适合快速搭 React 产品界面,自带主题与无障碍。 免费 + Pro · MIT
  7. ReUI:shadcn 生态里的后台组件仓库。适合用 shadcn/Base UI 打底、要更多业务向组件。 免费 + Pro · MIT
  8. coss ui:直接拼出 AI 聊天 / 助手界面。适合想要 shadcn 式源码开放、又有完整设计系统的 React 项目。 免费 · MIT
  9. Great UI:无障碍优先,复制粘贴就能用。适合React 项目,要现成的高颜值动效组件。 免费
  10. shadcn/ui:源码复制进项目,样式完全自己掌控。适合React 项目,要源码完全自有、按需拼装组件。 免费 · MIT
  11. Mantine:组件 + hooks 的一站式全家桶。适合React 全场景开发,要组件全、Hooks 与表单都省心。 免费 · MIT
  12. Naive UI:主题可调、全 TypeScript 的 Vue 组件。适合Vue 3 中后台,看重主题定制与 TypeScript 体验。 免费 · MIT
  13. Vuetify:Material Design 风格的 Vue 全家桶。适合Vue 中后台,要 Material 风格的完整组件生态。 免费 · MIT
  14. Skeleton:用设计令牌一键切换整套主题。适合Svelte/React 项目,要带主题系统的组件底座。 免费 · MIT
  15. shadcn-svelte:Svelte 版的 shadcn/ui。适合Svelte 项目,想要 shadcn 同款的源码自有模式。 免费 · MIT
  16. Angular Material:Angular 官方维护的 Material 组件。适合Angular 项目,要官方 Material 实现与无障碍保障。 免费 · MIT
  17. HeroUI:React Aria + Tailwind 的现代组件库。适合React + Tailwind 项目,要精致默认样式和无障碍底子。 免费 + Pro · Apache-2.0