Looseleaf教程:手绘风shadcn/ui——123个组件全部可访问

📌 项目日期:2026年11月 | 数据来源:GitHub官方仓库 | 星数:467+

📋 项目简介

shadcn/ui 成了React世界的默认组件库,于是"同质化"成了新的痛。Looseleaf 的答案很有趣:shadcn/ui, drawn by hand——123个可访问的React组件,手绘涂鸦风的视觉皮肤,底层无障碍实现一点不打折(键盘导航/ARIA/焦点管理全按shadcn标准),tailwind类名习惯也与shadcn一致。

界面个性化的另一路是 unslop(AI味修复技能);组件层的基建则是 shadcn官方cn引擎——三者一个管皮肤、一个管气质、一个管性能。

🔧 特性

特性说明
123个组件覆盖shadcn/ui常见场景
无障碍完整键盘/ARIA/焦点管理不因手绘风缩水
shadcn习惯tailwind类名与使用方式一致,迁移零成本
手绘皮肤涂鸦质感,创意/教育/个人项目绝配

📦 使用

git clone https://github.com/kevintngo/looseleaf.git
# 组件按shadcn方式引入(类名习惯一致)
# 具体安装与主题定制见README

✅ 使用建议

📚 常见问题

Looseleaf是什么?

shadcn/ui的"画出来的"版本:123个可访问的React组件——手绘涂鸦风外观,底层是完整的无障碍(a11y)实现;tailwind类名与shadcn使用习惯一致。

手绘风和无障碍怎么兼得?

视觉是皮肤,交互是骨架——键盘导航、ARIA属性、焦点管理全部按shadcn/ui标准实现,只是视觉层换成手绘风格。

适合什么项目?

创意工具、个人作品集、教育产品、任何想要"亲切手绘感"而非"企业感"的界面——123个组件覆盖常见场景。