亮有特色的 CSS 组件库，组件代码非常简洁，也支持深度定制主题、定制组件，可以搭配 Vue / React 等框架使用。

关于 daisyUI

daisyUI 是一款极为流行的 CSS UI 组件库，作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架构建的组件库。截止发文日期，已经在 Github 得到 11,200 Star， 944,600 次 NPM 安装。

Tailwind CSS 是一个功能类优先的 CSS 框架，通过类似于 .flex、.pt-4、.text-center、.rotate-90 这种原子类组合的 class 名快速构建网站，在 HTML 代码上就能完成开发，不需要再自己想各种 CSS 命名。

daisyUI 作为 Tailwind CSS 的组件库，不仅继承了它的优点，而且代码更简洁，主题非常漂亮有特点，打开官网就喜欢上它了。

daisyUI 的技术特性

• 提供 45 个常用组件，多达 29 款主题，款款都是精品
• 相比 Tailwind CSS 的原子类，daisyUI 采用语义化的 class 名，写出更纯净的 HTML
• 支持深度自定义、可定制主题
• 是一个纯净 CSS 组件，所以支持和任意 Vue / React 这样的框架一起使用

开发上手体验和使用感受

首先说说我最喜欢的主题，daisyUI 提供了 29 款主题，配色很舒服，各有特色，我首先想到用来做个人网站的主题，一定会很酷。

主题风格预览

安装和使用

需要注意的是，使用 daisyUI 前，需要和 Tailwind CSS 一起安装，最简单的方式是 cdn 引入：

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.2/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

生产环境更推荐用 npm 的方式，这样打包出来的项目会小很多：

安装 daisyUI

npm i daisyui

然后，在你的tailwind.config.js文件里追加 daisyUI 的设置

module.exports = {
  //...
  plugins: [require("daisyui")],
}

“反” Tailwind CSS

使用过 Tailwind CSS 的开发者一定对这种写一堆 class 名来构建组件的方式印象很深刻，我一直没有推荐 Tailwind CSS，就是因为个人实在不喜欢零零碎碎的 CSS 类名，我更倾向于写语义清晰的类名来开发组件。我们来看看实现一个常规的按钮，两种写法的区别：

<!-- Tailwind CSS 的写法 -->
<a class="inline-block px-4 py-3 text-sm font-semibold 
    text-cente text-white uppercase transition
    duration-200 ease-in-out bg-indigo-600 
    rounded-md cursor-pointer
    hover:bg-indigo-700">Button</a>

<!-- daisyUI 的写法 -->
<a class="btn btn-primary">Button</a>

daisyUI 的写法实在太简洁了，所以说 daisyUI 简直是“反” Tailwind CSS 思路一点也不为过，不过 Tailwind CSS 的作者认为语义化的 CSS 并不好维护，因为随着项目的迭代，很多 class 名早已失去了原有的意义了。各位前端小伙伴，你们觉得呢？

45 个组件如果没法满足，官方还提供了自定义组件的工具类，开发者可以快速构建自定义组件。官网提供了详尽的中文文档，纯 CSS 本身也易懂，对应的组件也有 HTML 代码例子，上手使用完全不是问题。

总的来说，这是一款漂亮、流行，代码简洁的 web UI 组件库，熟悉以后能提高开发效率，不妨写个快速 demo 尝试一下。

免费开源说明

daisyUI 是基于 Tailwind CSS 构建的 CSS 组件库，源码基于 MIT 开源协议托管在 Github 上，任何个人和公司都可以免费下载使用，也可以用于商业项目。

和 daisyUI 类似的框架还有之前推荐过的 Bootstrap 和 Pico.css，感兴趣的开发者也可以前往了解。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

当今快速发展的互联网时代，前端开发的需求日益增长，开发者们迫切需要一种能够快速构建高质量用户界面的工具。今天，我要向大家介绍一个名为Franken UI的开源UI组件库，它或许能成为您开发工具箱中的新利器。

什么是Franken UI？

Franken UI是一个HTML优先的开源UI组件库，它既可以作为独立的库使用，也可以作为Tailwind CSS的插件。它与UIkit 3兼容，设计灵感来源于shadcn/ui。这个库以其独特的设计哲学和高效的开发方式，为开发者提供了一种新的选择。

Franken UI的核心特点

1. 与Tailwind CSS的无缝集成

Tailwind CSS是一个实用主义的CSS框架，它提供了大量可组合的类，使得开发者能够直接在标记中实现设计。Franken UI与Tailwind CSS的结合，使得开发者能够利用这些工具的强强联合，快速构建出美观且响应式的界面。

2. UIkit 3的模块化支持

UIkit是一个用于开发快速且功能强大的Web界面的模块化前端框架。Franken UI继承了UIkit的这一优势，提供了预构建的组件和成熟的JavaScript库，支持模态框、弹出窗口、轮播图等复杂功能。

3. shadcn/ui的美学设计

shadcn/ui是一个提供可重用组件的集合，以其美观、有明确观点的设计而著称。Franken UI融合了这一设计美学，为组件提供了一致且吸引人的外观。

如何安装Franken UI？

Franken UI的安装过程非常简单，您可以选择通过CDN链接快速引入样式，也可以通过NPM将Franken UI集成到现有的Tailwind CSS项目中。无论是通过命令行工具初始化配置，还是手动编辑配置文件，Franken UI都提供了灵活的安装和配置选项。

CDN安装示例：

<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.5/dist/css/slate.min.css">

NPM安装示例：

npm install tailwindcss postcss franken-ui && npx franken-ui init -p

Franken UI的主题和定制

Franken UI提供了12种不同的主题，从稳重的石板灰到活泼的玫瑰红，您可以根据项目需求选择合适的主题。此外，如果您觉得现有主题还不够，Franken UI还支持自定义调色板，让您可以根据自己的品牌风格定制组件的外观。

编辑器支持和社区贡献

Franken UI支持TypeScript，并且与现代编辑器集成良好，提供了自动完成等特性，提高了开发效率。同时，Franken UI是一个活跃的开源项目，欢迎社区成员的贡献和反馈，共同推动项目的发展。

结语

Franken UI以其创新的设计和灵活的配置，为前端开发带来了新的活力。无论您是经验丰富的开发者，还是刚入门的新手，Franken UI都能为您提供快速构建高质量用户界面的能力。立即访问Franken UI官网，开始探索这个强大的UI组件库吧！

evExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

本文介绍自定义基于HTML的UI组件的方法。

DevExtreme Complete Subscription官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网

组件的API

官方建议使用UI组件的API来自定义它，与CSS类不同，API很少被更改。如果发生更改，UI组件将用警告填充浏览器控制台，帮助开发人员修复代码。

每个UI组件都有一个在UI组件的API参考部分中描述的API，例如开发人员可以通过相应的属性指定UI组件的宽度。在下面的例子中，这个属性是为List UI组件设置的。

jQuery

JavaScript

$(function() {
$("#listContainer").dxList({
width: 600
});
});

ASP.NET MVC控件

Razor C#

@(Html.DevExtreme().List()
.Width(600)
)

如果页面包含同一个UI组件的多个实例，开发人员可以使用defaultOptions(rule) 方法在一个地方为所有这些组件指定默认配置，相同的方法允许开发者为不同的设备指定不同的默认配置。

此外，UI组件提供了可以用于更深入自定义的模板。

单个CSS类

由于DevExtreme组件包含标准的HTML元素（<div>, <td>, <tr>等），所以开发人员可以使用CSS来自定义它们。

文档中记录了许多类，但是在大多数情况下，开发人员需要检查HTML标记来确定和覆盖应用的CSS类。

可以像往常一样使用class属性将类添加到标记中的UI组件元素中，如果不可能更改标记，则使用UI组件的elementAttr属性来实现相同的目的。

注意：CSS内部结构可能在不同版本之间更改而不另行通知。考虑到这一点，我们建议在可能的情况下使用它们的API替代CSS来自定义UI组件。因为如果API发生了更改，开发人员将收到通知。

在自定义过程中，建议通过响应式设计模式查看UI组件页面再不同设备上的外观。