「小墨是前端」专注分享前端技术，推荐优秀的开源项目，展示Github、Gitee上的创意作品，带你深入前端底层，一起成长。

大家好，我是小墨！最近在找一些前端的UI组件库。偶然间，发现了ZUI 3，体验之后感觉真香！必须来给大家分享一波～

ZUI 3 简介

ZUI 3 是一个全新的开源 UI 组件库，它提供了丰富的实用组件，而且不依赖任何 JavaScript 框架！也就是说你可以在任何 Web 应用中直接使用它，不管是 Vue、React 还是原生 HTML，它都能完美兼容！关键是，它还提供了自由的定制使用方式，简直不要太灵活！

功能特点：真的实用！

ZUI 3 有几个特别吸引我的地方：

1. CSS工具类贼丰富： 它基于 Tailwind CSS 提供了大量的 CSS 工具类，包括一些语义化的外观工具类，让我们可以轻松搞定常见的布局、文字排版、动画等，代码简洁又高效。

2. CSS 组件开箱即用： ZUI 3 提供了许多实用的 CSS 组件，像按钮、表单、导航、卡片、表格等，不用写 JS 就能实现基本功能。这对于快速搭建页面来说，简直就是神器！

3. JS组件功能强大： 除了 CSS 组件，ZUI 3 还提供了强大的 JS 组件，比如下拉菜单、工具提示、对话框、数据表格等，功能非常完善。

4. 主题定制超方便： ZUI 3 基于 CSS 变量实现了全局 UI 配置，支持深色模式，轻松定制主题，再也不用为样式不统一而烦恼了！

使用方式：简单到哭！

使用 ZUI 3 真的非常简单。你可以直接通过 CDN 引入 CSS 和 JS 文件，也可以使用 npm 或 pnpm 进行安装。

CSS 工具类示例：

<button class="btn primary">这是一个按钮</button>

就这么一行代码，一个漂亮的按钮就出现了，是不是很神奇？

JS 组件示例：

<menu id="myMenu"></menu>

<script>
  // 假设 ZUI 3 的 JS 已经引入
  const menu = new Menu('#myMenu', {
    items: [
      { label: '选项一', onclick: () => { console.log('点击了选项一'); } },
      { label: '选项二', onclick: () => { console.log('点击了选项二'); } },
    ],
  });
</script>

几行代码，一个功能完善的下拉菜单就搞定了，是不是很方便？

项目地址

https://github.com/easysoft/zui

总结

ZUI 3 的优点很多，比如：丰富的组件、灵活的使用方式、易于定制的主题、完善的文档等等。当然，它也有一些不足之处，比如目前部分组件文档还在完善中。但瑕不掩瑜，ZUI 3 依然是一个非常值得推荐的 UI 组件库。

你觉得 ZUI 3 怎么样？在评论区留下你的想法吧！

创作不易，欢迎大家关注、点赞、收藏、转发！我会继续分享高质量的干货和前沿的技术，给大家提供更多有价值的内容！