wxhappylife.top / Demain Library

UI 组件库精选推荐

根据网站特点（文学书籍站、暖金文艺风、Halo CMS 自托管、Thymeleaf 模板、纯 HTML/CSS/JS）量身定制

I

轻量 CSS 框架

无需框架依赖，CDN 直接引入
最推荐
Pico.css
13.5k stars
语义化 HTML 的极简 CSS 框架，无 class 设计，内置深色/浅色主题切换，自动适配表单、卡片、排版等元素。
CSS ~10KB 深色模式 无类名
适配理由：你的网站以阅读体验为核心，Pico 的语义化设计天然适合文章排版。内置的暗色模式可直接用于书籍页面的日/夜切换，且不与现有 theme-Serenity 冲突——按需引入即可。
GitHub 仓库
Sakura
4.6k stars
专为博客和文字内容设计的极简 CSS 框架，暖色调默认主题，优雅的排版和间距，类 Vanilla CSS 风格。
CSS ~4KB 排版优化 无类名
适配理由：Sakura 的暖色调默认风格与 Demain Library 的金棕文艺风高度契合。体积极小，可作为文章详情页的排版增强层，与现有自定义 CSS 共存无冲突。
GitHub 仓库
Water.css
5.5k stars
「Just-add-water CSS」——零 class 的样式表，自动为 HTML 元素添加美观样式，支持亮/暗主题自动切换。
CSS ~2KB 自动切换 无类名
适配理由：如果你需要快速搭建一个新的 Halo 页面原型（比如文章列表、关于页），Water.css 能让你只写纯 HTML 就获得美观效果，加速开发迭代。
GitHub 仓库
II

组件库（复制粘贴型）

提取 HTML+CSS 代码，无需安装依赖
最推荐
daisyUI
36k stars
Tailwind CSS 的组件库，提供 50+ 纯 CSS 组件（卡片、徽章、模态框、手风琴等），支持 29 种主题，可自定义主题色。
CSS 组件 50+ 组件 29 种主题
适配理由：书籍卡片、金句卡片、模态弹窗等组件可直接参考 daisyUI 的设计模式。你可以用它的主题系统定义一套「金棕文艺风」配色（--color-primary: #C8952E），然后复制组件 HTML 到 Thymeleaf 模板中。
GitHub 仓库
HyperUI
3.1k stars
免费开源的 Tailwind CSS 组件集合，包含营销区块、电商组件、卡片布局、导航等，所有代码可直接复制使用。
HTML + CSS 卡片/布局 复制即用
适配理由：HyperUI 的卡片布局和营销区块设计非常适合参考用于书籍展示页、金句页的重新设计。代码简洁，把 Tailwind class 替换为你的自定义 CSS 变量即可。
GitHub 仓库
Flowbite
8.5k stars
基于 Tailwind CSS 的组件库，含卡片、轮播、模态框、下拉菜单、日期选择器等，部分组件带 vanilla JS 交互。
Tailwind Vanilla JS 丰富组件
适配理由：Flowbite 的日期选择器、轮播组件、下拉菜单等可参考用于日历笔记页和书籍分类筛选。它的 JS 组件不依赖框架，适合 Halo 的 Thymeleaf 模板环境。
GitHub 仓库
III

动画与交互库

增强金句闪光、卡片悬浮等效果
最推荐
Animate.css
81.5k stars
最流行的 CSS 动画库，提供 80+ 预定义动画效果（淡入、弹跳、翻转、缩放等），一行 class 即可使用。
CSS 动画 80+ 效果 CDN 引入
适配理由：金句卡片的进入动画、书籍卡片的悬浮效果、页面切换的过渡动画，都可以直接用 Animate.css 的 class 实现。体积极小，不影响页面性能。
GitHub 仓库
Hover.css
29.5k stars
CSS3 悬停效果集合，包含按钮悬浮、链接下划线动画、图标旋转、阴影变化等 20+ 种效果。
CSS 悬停 20+ 效果 纯 CSS
适配理由：书籍卡片和按钮的悬浮交互效果可以直接参考 Hover.css。比如金句「收藏」按钮的悬浮发光效果、书籍卡片悬浮时的金色边框渐变，都能在这里找到灵感。
GitHub 仓库
AOS (Animate On Scroll)
25.5k stars
滚动触发动画库，元素进入视口时自动播放动画（淡入、滑动、翻转等），支持动画延迟和视差效果。
Vanilla JS 滚动动画 ~14KB
适配理由：书籍列表页滚动时卡片依次淡入的效果、金句页的打字机效果增强，都可以用 AOS 实现。它不依赖任何框架，CDN 引入后加 data-aos 属性即可。
GitHub 仓库
IV

日历与日期组件

增强日历笔记页面
最推荐
Vanilla Calendar Pro
1.8k stars
轻量级纯 JS 日历组件，无依赖，支持月/周/日视图、日期范围选择、自定义主题、多语言（含中文）。
Vanilla JS 日历 ~20KB 主题自定义
适配理由：你的日历笔记页（cal_server.py）可以用 Vanilla Calendar 替换手写的日历 UI，获得更专业的日期选择、月份切换和中文本地化体验。它的 CSS 变量系统可以完美匹配金棕主题色。
GitHub 仓库
FullCalendar
19.5k stars
功能最全的 JS 日历库，支持月/周/日/列表视图、拖拽事件、外部数据源、多时区，插件生态丰富。
Vanilla JS 全功能日历 插件丰富
适配理由：如果未来想把日历笔记升级为完整的日程管理系统（带事件拖拽、提醒），FullCalendar 是最成熟的选择。可以把现有的 notes JSON 数据作为 events 数据源接入。
GitHub 仓库
V

图标库

统一网站图标风格
最推荐
Lucide Icons
17k stars
社区维护的 SVG 图标库（Feather Icons 分支），1400+ 精致图标，支持 SVG sprite、Web Font、React/Vue 等多种使用方式。
1400+ 图标 SVG / Font 按需加载
适配理由：Lucide 的图标线条纤细优雅，与文艺风格高度契合。书籍、阅读、天气、日历、收藏心形等图标都有，可通过 CSS 变量统一控制颜色和大小，完美融入金棕主题。
GitHub 仓库
Phosphor Icons
13k stars
灵活的图标家族，每个图标提供 6 种粗细风格（thin/light/regular/bold/fill/duotone），1000+ 图标。
1000+ 图标 6 种风格 SVG / Font
适配理由：Phosphor 的 duotone（双色）风格非常适合你的网站——用金色填充主色、棕色描边，可以创造出独特的文艺图标风格，比单色图标更有层次感。
GitHub 仓库
Tabler Icons
18k stars
5900+ 像素级完美的 SVG 图标，全部免费开源，支持 icon font、SVG sprite、React/Vue 组件。
5900+ 图标 SVG / Font 按需引入
适配理由：Tabler 的图标数量最多，覆盖书籍、天气、日历、社交、导航等所有场景。如果 Lucide 找不到某个特定图标，Tabler 几乎一定有。
GitHub 仓库
VI

排版与阅读增强

提升文章和金句的视觉表现
最推荐
Typeset.css
1.2k stars
为长文阅读优化的 CSS 样式表，自动处理段落间距、首字下沉、引用样式、列表缩进、脚注格式等排版细节。
CSS 排版增强 ~3KB
适配理由：Demain Library 的核心是阅读体验。Typeset.css 的首字下沉、优雅引用、段落间距等排版细节，可以让 Halo 文章的阅读质感提升到纸质书级别。
GitHub 仓库
Open Dust
800+ stars
为阅读类应用设计的 CSS 框架，提供纸张纹理、书脊阴影、翻页效果、羊皮纸背景等文学风格组件。
CSS 书籍风格 翻页效果
适配理由：你的 EPUB Reader 和书籍列表页已经采用了羊皮纸背景和木质风格。这类框架可以提供更精致的纸张纹理、书脊效果参考，强化「数字书房」的沉浸感。
GitHub 仓库
Climacon
800+ stars
精美的 SVG 天气图标集合，纯 CSS 动画版本可用，包含晴、多云、雨、雪等 30+ 种天气状态的矢量图标。
SVG 天气 CSS 动画 矢量
适配理由：你的天气时钟组件可以用 Climacon 替换现有的天气图标，获得更精致的 SVG 动画效果（飘雪、下雨、云朵飘动），与文艺风格更加统一。
GitHub 仓库
VII

设计灵感与工具

辅助 UI 设计与配色
UI Snippets
1.3k stars
精选的 CSS/JS 交互片段集合，包含按钮效果、卡片悬浮、加载动画、渐变背景等可直接复制的代码片段。
代码片段 交互效果 复制即用
适配理由：金句页的闪光效果、卡片的 3D 悬浮、按钮的涟漪点击反馈——这些细节增强都可以从 UI Snippets 找到现成方案，修改配色变量即可适配金棕主题。
GitHub 仓库
css.gg
10k stars
200+ 纯 CSS 实现的图标（无 SVG/无字体），每个图标仅 ~200 bytes，支持 CSS 变量控制颜色和大小。
纯 CSS 图标 ~200B/个 200+ 图标
适配理由：纯 CSS 图标意味着零网络请求、零字体加载，对服务器性能友好。适合在 Halo 文章或模板中直接使用，通过 CSS 变量统一为金棕色系。
GitHub 仓库
Magic Animations
6.5k stars
CSS 动画特效库，提供透视、翻转、缩放、光影等炫酷效果，比 Animate.css 更注重视觉冲击力。
CSS 动画 特效丰富 CDN 引入
适配理由：首页的金色闪光效果、书籍封面展开动画、金句卡片翻转效果，都可以用 Magic Animations 增强视觉表现力，让网站更有「精品书店」的质感。
GitHub 仓库

针对 Demain Library 的推荐组合方案

根据网站现有技术栈（Halo CMS + Thymeleaf + 纯 HTML/CSS/JS）和设计风格（暖金文艺风），以下是最实用的组合：

Pico.css — 基础排版 + 暗色模式
daisyUI — 卡片/模态框组件参考
Animate.css + AOS — 页面动画
Lucide Icons — 统一图标
Vanilla Calendar — 日历笔记升级
73 个 DESIGN.md — 品牌设计参考

以上所有库均支持 CDN 引入或自托管，无需 npm/构建工具，可直接在 Halo Thymeleaf 模板中使用。
建议先下载试用，将喜欢的组件 CSS 提取到 dm-custom-pages.css 中，用 --color-* 变量统一为金棕主题色。

为 Demain Library (wxhappylife.top) 定制 · 2026-06-28