Repolode
提交项目
kevintngo

kevintngo/looseleaf

手绘风格的 shadcn/ui 组件库，123 个可访问的 React 组件，像在纸上用笔画出来一样。

在 GitHub 查看官网
Star
538
Fork
31
未关闭 Issue
1
最近提交
6天前

这是什么？

Looseleaf 基于 React、Tailwind v4 和 Radix 构建，保留了 shadcn/ui 的组件结构、props 和 data-slot 命名，外观则是纸张底色加手绘线条，可选贴纸和印章。由于 API 与 shadcn/ui 一致，现有的 JSX 通常无需修改即可替换。

库中涵盖 shadcn/ui 的全部组件，并额外提供纸张类元素、标记、速写板和聊天组件，另有 61 个现成区块，包括侧边栏、登录、仪表盘和定价页。还附带 160 个图标、48 个涂鸦、88 个贴纸，以及一款手写风格字体 Kevin Sans。组件通过 shadcn CLI 从注册表地址添加，以源码形式放入项目中。

图形由一个带种子的 TypeScript 函数生成，输出通过 CSS 变量着色的 SVG，同一种子在服务端和浏览器中绘制结果一致。悬停、按下和聚焦状态由 CSS 处理。项目同时支持键盘操作、可见焦点、减少动效、强制颜色模式、RTL 以及三档密度。

核心功能

  • 01与 shadcn/ui 的组件结构、props 和 data-slot 命名保持一致，可直接替换。
  • 02手绘风格的 SVG 图形由带种子的函数生成，服务端与浏览器渲染结果一致。
  • 03提供 61 个现成区块，如仪表盘、登录页和定价页。
  • 04附带 160 个图标、48 个涂鸦、88 个贴纸和 Kevin Sans 字体。
  • 05通过 shadcn CLI 添加组件，源码直接放入项目。
  • 06支持键盘操作、可见焦点、减少动效、强制颜色模式和 RTL。

适用场景

  • 在 shadcn/ui 基础上构建需要手绘、笔记本风格界面的产品。
  • 用预制的纸张主题区块快速搭建落地页或仪表盘。
  • 无需手写 SVG，即可为应用添加贴纸、印章或涂鸦。

快速上手

  1. 1

    在 components.json 中添加 @looseleaf 注册表

  2. 2

    使用 shadcn CLI 添加组件

    npx shadcn@latest add @looseleaf/button
  3. 3

    在项目仓库中安装依赖

    npm install
  4. 4

    在本地启动文档站点

    npm run dev

使用前须知

  • 组件会以源码形式复制到你的仓库中，因此你需要自行维护这些代码。

标签

#react#tailwind#radix-ui#component-library#shadcn#design-system#ui-kit#typescript

常见问题

looseleaf 是什么？
手绘风格的 shadcn/ui 组件库，123 个可访问的 React 组件，像在纸上用笔画出来一样。 Looseleaf 基于 React、Tailwind v4 和 Radix 构建，保留了 shadcn/ui 的组件结构、props 和 data-slot 命名，外观则是纸张底色加手绘线条，可选贴纸和印章。由于 API 与 shadcn/ui 一致，现有的 JSX 通常无需修改即可替换。
looseleaf 可以免费使用吗？用的什么许可证？
looseleaf 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
looseleaf 还在维护吗？
活跃维护中。looseleaf 最近一次提交是在 2026年11月1日。
looseleaf 适合用来做什么？
在 shadcn/ui 基础上构建需要手绘、笔记本风格界面的产品。 用预制的纸张主题区块快速搭建落地页或仪表盘。 无需手写 SVG，即可为应用添加贴纸、印章或涂鸦。
looseleaf 怎么安装和运行？
在 components.json 中添加 @looseleaf 注册表 使用 shadcn CLI 添加组件: npx shadcn@latest add @looseleaf/button 在项目仓库中安装依赖: npm install 在本地启动文档站点: npm run dev
在哪里获取 looseleaf？
源代码和安装说明在 GitHub 上：https://github.com/kevintngo/looseleaf

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目