太新了，昨天才开源的手绘风格的 UI 库 - looseleaf。
目前有 15 个分类，总共 123 个组件，质量非常高，构建任何你想要的项目绰绰有余了，这是我看到最完整最佳的手绘风格的 UI 组件库了。
而且昨天（1号）才开源，我算是首发推荐的了。
作者 Kevin Ngo ，组件库叫： Looseleaf 123 个组件，全部手绘风格，并且和 shadcn/ui 完全兼容，可以像常用的组件库一样直接用，或者让 AI 直接调用。
先上地址：
网站：kevintngo.github.io/looseleaf/
仓库：github.com/kevintngo/looseleaf01
Looseleaf 是什么
用作者自己的话说，Looseleaf 是 "shadcn/ui, drawn by hand"。它把 shadcn/ui 的整套组件重画了一遍，从 button 到 sidebar 到 chart，每个界面元素都像画在纸上：干净的轮廓线、填色的色块、随手贴的贴纸和胶带。
组件库：
123 个组件，官网分成 15 个大类，常规表单控件全覆盖，还有不少手绘风独有的，比如 sketchpad 画板、sticky-note 便利贴、polaroid 拍立得相框、signature-pad 手写签名61 个 blocks，登录页、注册页、仪表盘、设置页、定价页、聊天界面，成套的布局直接抄160 个图标、88 个贴纸，外加一个铅笔头吉祥物 Stubby，画了 15 个姿势一款手绘字体 Kevin Sans，界面正文、标题、印章三种用法各做了适配
协议是 MIT，代码、画作、字体都包含在内，个人项目和商业项目都能用。
这些元素全部是用代码画出来的，精度和一致性比扫描手绘素材高一个档次。放大看每条线都有手绘的抖动感，缩小看整体排版又是标准的组件库规格。
02
怎么用：shadcn
如果你已经在用 shadcn/ui，上手成本约等于零。在 components.json 里注册一下 registry：
"registries": {
"looseleaf": "https://kevintngo.github.io/looseleaf/r/{name}.json"
}
然后按熟悉的命令装，粒度随你挑：
装一个组件
npx shadcn@latest add @looseleaf/button
装一整块布局，比如登录页
npx shadcn@latest add @looseleaf/login-01
或者整套全要
npx shadcn@latest add @looseleaf/looseleaf
组件装进你的仓库时是源码，之后想调线条、换颜色、改字体，直接改文件就行。用法上就是普通的导入：
import { Button } from "@/components/ui/button"
>画一个按钮</Button>
我的建议是先把官网过一遍再动手。15 个分类每个都有实时的预览，组件长什么样、按下有什么反馈，看得到再决定装哪些。
03
手绘是怎么画出来的
这是我最想讲的部分。作为一个天天和组件库打交道的设计师，我认为 Looseleaf 的完成度高，高在实现方式，不只是画风好看。
每个组件背后垫了一层 SVG。 真实的 DOM 结构还是原来的按钮、输入框，手绘的线条画在一层 里，跟在后面。所以可访问性、表单行为、屏幕阅读器支持，全部继承自真实组件，手绘只是外面那层皮。
线条是函数算出来的，同一个种子画出同一条线。 每条手绘线由一个带种子的 TypeScript 函数生成，种子相同，服务端和浏览器画出来的线完全一致。这解决了手绘风格上生产环境最大的障碍：SSR 页面不会因为服务端和客户端各画各的而闪一下。
交互状态不用重新画。 hover、按下、聚焦的效果是提前画好的图层，用 CSS 切换显示，React 不参与重绘。按下按钮时那条变粗的轮廓线早就画完了，只是等你按下去才露出来。
所有视觉参数都是 token。 颜色、笔宽、圆角、密度全部收在 --ll-* 变量里，并且映射到了 shadcn 的语义变量上。想把手绘的墨色从黑换成深蓝，改一个变量就够，不用碰任何组件代码。
可访问性也没有因为画风妥协：文字对比度按 AA 标准，点击目标 24px 起，支持 reduced motion、RTL，手绘风的库很少能做到这么全面和细腻的。
04
和 Excalidraw、rough.js 比一比
想做手绘风格的界面，以前主要有两条路。
Excalidraw 是白板工具，画草图、画原型非常好用，但它产出的是画布上的图形，做不成有真实交互的产品界面。
rough.js 是手绘渲染引擎，能画出那种边缘发抖的线条，但它只给你画笔，按钮的行为、弹窗的焦点管理、表单的校验状态，都得自己从零搭。
Looseleaf 补上的是组件这一层：交互、可访问性、状态管理都是现成的，手绘只是你选的一种主题。 再加上它兼容 shadcn 的 registry 生态，61 个 blocks 开箱就是完整页面，这是前两者给不了的。
如果你在用 Claude Code 或 Cursor 这类工具做 vibe coding，它还有一个隐性优势：AI 对 shadcn/ui 的组件结构非常熟，把 Looseleaf 的 registry 给它，照着 shadcn 的习惯就能直接产出手绘风格的界面，几乎不会出错。 05
最后
一个开源第二天的新库，123 个组件、61 个 blocks、连字体和吉祥物都画好了，这个完成度放在哪都少见。
开源首日 star 已经开始涨，可以预见接下来一段时间它会在时间线上反复出现。
对手绘风格，我的看法一直是这样：它适合的场景其实很具体，作品集、儿童产品、教育工具、创意演示，还有那些想让人一眼记住的着陆页。这些场景里手绘传递的是温度和亲和力，解决的问题是通用组件库搞不定的。
去官网把 15 个分类翻一遍，哪怕暂时用不上，看看别人怎么把一种风格做透，也是件有收获的事。
