打开参考库

COLLECTION 03 — COMPONENTS & CODE

UI 组件库推荐与选型参考

组件库的选择，取决于你用什么技术、要做什么产品，以及需要多少定制。这里把可修改的源码、现成组件体系和单个 UI 元素分开比较。

5 个资源来源3 个代表案例更新于
先看具体案例

从你的任务开始

React · 现成组件从主题与组件体系开始Vue 3 · 表单与后台从 Vue 3 组件与中文文档开始自由定制组件源码按项目需要修改与维护组件

START WITH A CASE

先看这几个具体例子

已有展示样本 · 完整效果在原站查看
HeroUI · 内容卡片（React）已有展示截图静态截图

HeroUI

HeroUI · 内容卡片（React）

需要内容引导卡片时，观察图标、说明和行动链接如何组合。

打开原站案例 资源说明
Element Plus · 列表卡片（Vue 3）已有展示截图静态截图

Element Plus

Element Plus · 列表卡片（Vue 3）

后台内容分组时，比较卡片标题、列表正文和页脚的结构。

打开原站案例 资源说明
shadcn/ui · 登录卡片（React）已有展示截图静态截图

shadcn/ui

shadcn/ui · 登录卡片（React）

需要统一表单样式时，观察字段、辅助入口与主要操作的优先级。

打开原站案例 资源说明

MAKE A CHOICE

先匹配技术栈，再看定制与维护成本

左右滑动查看完整比较

React 现成界面从 HeroUI 开始；Vue 3 后台先看 Element Plus；需要维护自己的组件源码时比较 shadcn/ui 与 Radix。

UI 组件库推荐选型比较
来源技术栈适合的项目任务定制与维护方式具体入口
shadcn/uiReact 生态需要自己的视觉体系与表单界面源码加入项目，由项目维护修改Card 登录卡片
Radix UIReact需要复用键盘、焦点与弹出层基础Primitives 自配样式；Themes 提供主题Button 按钮
HeroUIReact希望从现成主题与组件搭建界面按官方组件和主题 API 调整Card 内容卡片
Element PlusVue 3后台表单、列表与数据操作界面按组件 API 与主题文档组合Card 列表卡片
Uiverse按条目：HTML / CSS 等给已有页面补一个按钮或局部元素复制所选条目，再统一视觉与状态按钮示例

KNOW YOUR SOURCES

再了解各个资源来源

用途、使用方式与取舍，一起看。
  1. 01可修改源码

    shadcn/ui

    ui.shadcn.com

    提供可组合、可定制的组件与代码分发方式，让组件源码成为项目的一部分。

    • React 生态
    • 设计系统
    适合
    已有自己的视觉方向，需要持续修改组件细节。
    怎么用
    从官方安装与组件文档开始，按项目需要引入组件，再统一主题。
    取舍
    定制自由也意味着需要自己维护组件代码与后续修改。
    查看具体示例 官方资料
  2. 02底层与主题

    Radix UI

    radix-ui.com

    Primitives 提供重视可访问性的无样式组件；Themes 提供可直接采用的主题组件。

    • React
    • 可访问性
    适合
    需要控制视觉表现，同时复用焦点、键盘与弹出层等交互基础。
    怎么用
    先分清自己需要 Primitives 还是 Themes，再阅读对应的组合与样式文档。
    取舍
    使用无样式 Primitives 时，需要自己完成样式和完整的产品体验。
    查看具体示例 官方资料
  3. 03组件体系

    HeroUI

    heroui.com

    提供面向 React 的组件与主题入口，适合从现成的界面基础开始搭建产品。

    • React
    • 主题定制
    适合
    希望较快搭建 React 产品界面，再逐步调整视觉。
    怎么用
    以当前官方版本的安装、组件和主题文档为准，先试一个实际表单或对话框。
    取舍
    HeroUI、Native 和 Pro 是不同入口，需要按项目和内容范围区分。
    查看具体示例 官方资料
  4. 04组件体系

    Element Plus

    element-plus.org

    面向 Vue 3 的组件库，提供中文文档和表单、导航、数据展示等组件入口。

    • Vue 3
    • 表单与后台
    适合
    Vue 3 项目中的管理界面、表单和数据操作页面。
    怎么用
    从安装文档开始，围绕项目里的表格、表单与反馈组件做小范围验证。
    取舍
    需要 Vue 3 环境；复杂页面仍需设计数据、校验和操作流程。
    查看具体示例 官方资料
  5. 05单个 UI 元素

    Uiverse

    uiverse.io

    社区分享按钮、输入框、卡片与加载效果等 UI 元素，可按条目查看代码形式。

    • HTML / CSS
    • 多种形式
    适合
    已有整体界面，只需要补充一个局部控件或细节效果。
    怎么用
    按元素和技术形式挑选，再把颜色、尺寸与状态调整成项目自己的样式。
    取舍
    单个元素不等于一套完整设计系统，组合前需要统一风格和交互状态。
    查看具体示例 官方资料

把参考用到你的项目里

  1. 01

    先确定技术栈

    React、Vue 和纯 HTML/CSS 的使用方式不同，先排除不适合当前项目的实现。

  2. 02

    用真实界面试一次

    拿项目里实际的表单、列表或对话框做验证，观察状态、布局和定制是否顺手。

  3. 03

    决定谁来维护细节

    复制源码与依赖组件库各有维护方式。确定主题、升级和组件修改由谁负责。

开始之前，你可能还想知道

组件库和 UI 元素网站应该怎么选？

需要整套界面的一致性时，先看组件体系或可组合的组件源码；只补一个按钮、卡片或加载效果时，可以从单个 UI 元素开始。两者可以配合，但要统一视觉和状态。

React 和 Vue 的组件可以混用吗？

通常不能直接互换运行。先确认项目使用的框架与版本，再查看组件对应的安装方式；视觉参考可以借鉴，实现方式需要匹配技术栈。

开源组件都能直接用于商业项目吗？

应查看具体项目及所用条目的许可证，按要求保留必要声明。组件源码、付费模板和第三方图片的使用条件也需要分别确认。