Looseleaf：把 shadcn/ui 画成手绘纸面风的开源组件库

用 shadcn/ui 搭的后台看得多了，总有些产品想跳出这套默认观感——比如给儿童、教育或者轻工具类产品一点纸面的温度，又不想放弃 shadcn 生态的组件质量和无障碍底子。Kevin Ngo 开源的 Looseleaf（MIT）就是给这个处境准备的：123 个组件覆盖 shadcn/ui 全部部件，从按钮到侧边栏到图表，部件名、props 和 data-slot 命名保持一致，JSX 一行不用改，换个注册源就换成手绘纸面风。项目 2026-11-01 建库，截至 2026-11-04 有 305 星，官网 kevintngo.github.io/looseleaf 可整站预览；公众号「目前最全的手绘 UI 组件库」一文称其为「最完整最佳的手绘风 UI 组件库」。

核心功能

• 与 shadcn/ui 完全互换：保留 shadcn/ui 的部件、props 和 data-slot 命名，基于 React + Tailwind v4 + Radix 构建，无障碍语义照旧，已有项目里换注册源即可换皮。
• 123 个组件与 61 个 blocks：从表单控件到 sidebar、chart，再加纸面物件、标记、贴纸、画板和聊天套件；blocks 覆盖登录、注册、仪表盘、设置、定价、聊天和落地页段落，成套直接拷。
• 美术资源全部用代码画：160 个图标、48 个涂鸦、88 个贴纸、徽章与印章，外加吉祥物 Stubby 的 15 个姿势，全部代码绘制而非位图素材，缩放和换色不失真。
• 手绘字体 Kevin Sans：一款随主题附带的手绘字体，正文、标题、印章三种角色分别调过。
• 无障碍不缩水：键盘可达、可见焦点、AA 级文字对比、24 px 触控目标、减弱动效、强制配色、RTL 和三档密度都在默认行为里。

典型使用场景

• 给轻产品换气质：儿童教育、笔记工具、个人品牌站这类想让界面「不像模板」的产品，整套换装后仍是标准 Radix 语义，交互和无障碍不打折。
• 内容型页面的点缀：不整站换皮，只取贴纸、印章、拍立得相框、手写签名板这类纸面物件，给落地页或空状态加手作感。
• 成套抄布局：61 个 blocks 是现成的登录页、定价页、仪表盘组合，按 shadcn 的 block 用法直接添加再改文案。

快速上手

在项目的 components.json 里加一次注册源：

{
  "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

装完组件以源码形式落进你的仓库（components/ui/*.tsx、lib/ink/*），是自己的代码而不是运行时依赖；主题自带 Kevin Sans，想手动引字体也有独立的 CSS 入口。

小结

Looseleaf 适合已经在用 shadcn/ui、又想要手绘纸面观感的前端开发和独立开发者；追求严肃后台密度或企业级中性风格的项目不适合，手绘线稿在数据密集界面里会显得吵。要点与边界：MIT 许可、TypeScript 编写、组件以源码进仓库；项目 2026-11-01 才建库，四天 305 星还处在快速变动期，API 和组件清单都会动。手绘风格和 Kevin Sans 字体面向拉丁文设计，中文界面需要另配中文字体并自己调协调。同走手绘路线的还有 rough.js 路线的 Sketchcn，Looseleaf 的差别在覆盖 shadcn/ui 全集加纸面物件、blocks 与字体成套。站内写过改 AI 味界面的 unslop 和带 52 道闸门的 ux-ui-agent-skills：前者管把现有界面修出性格，Looseleaf 管从组件层就换一套世界观，两者可以接在同一条工作流里。