网页 UI 做得好不好，很多时候差的不是审美，而是手里有没有合适的组件库。X 博主摸鱼巨匠整理了一份 7 个风格各异的 UI 组件库清单，从手绘笔记本风到液体物理效果、再到专为 AI 产品做的组件都有。下面按原帖逐个展开，每个都对照官网与仓库核过，也顺手标出了原帖没提到的注意点：比如个别功能要付费，个别库并不是 React 的。
1. Looseleaf：手绘风的 shadcn/ui
Looseleaf 是“手绘版 shadcn/ui”：123 个无障碍 React 组件，外观像用钢笔手绘在纸上，纸张纹理、胶带贴纸这些细节都带上了，但组件划分与 props 和 shadcn/ui 保持一致，会用 shadcn 的人上手没有成本。MIT 开源，带 shadcn registry，复制粘贴就能用。
官网：kevintngo.github.io/looseleaf · GitHub：kevintngo/looseleaf（587 星，MIT 开源）
2. Rare UI：稀有的动画组件，一个文件一个组件
Rare UI 是一个 shadcn registry，专门收集那些不常见的动画组件：每个组件一个文件，基于 Next.js、Tailwind CSS 与 TypeScript，用 Motion 做动画，还照顾到了 prefers-reduced-motion（减弱动效偏好）。安装不用装包，一行 shadcn CLI 就能把组件拉进自己的代码库：npx shadcn@latest add swamimalode07/rare-ui/{component-name}；也支持 MCP，Claude Code、Cursor、Codex 都能直接调。
注意授权：README 标注的是 MIT + Commons Clause + Attribution，不是纯 MIT，商用前建议先看一眼授权说明。
官网：rareui.com · GitHub：swamimalode07/rare-ui（1,990 星）
3. ExpoKit：移动端高端组件库
ExpoKit 是面向 Expo 与 React Native 的动画组件库：组件、图表、页面模板与 CLI 都是复制粘贴即用，iOS、Android、Web、Expo Go 都能跑。自带的 expo-charts 是一套可交互的动画图表，面积图、柱状图、仪表盘、 donut 图都能拖、能点。
注意：原帖提到的液态玻璃与 3D 效果属于 ExpoKit Pro 付费版，免费的开源仓库里没有；免费版的卖点是动画组件、图表与模板。
官网：expokit.in · GitHub：ExpoKit/ExpoKit（123 星，MIT 开源）
4. goopUI：会滴落、拉伸、融合的液体物理效果
goopUI 把 shadcn 风格的组件目录做了“黏液化”：同样的组件、同样的 API，底层基于 reka-ui，再加一个微型物理引擎，按钮、卡片这些组件会滴落、拉伸、挤压、融合，玩起来很上头。目前还是 Alpha 阶段。
注意：它是 Vue/Nuxt 的库，React 与 Svelte 还在计划中；如果你是 React 项目，这个先收藏就好，还用不上。
官网：goop.timmcmasters.work · GitHub：Tmmcmasters/goopui（32 星，MIT 开源）
5. beUI：动画丰富的组件库
beUI 是免费开源的动画组件库，覆盖 React、Next.js 与 React Native，用 Motion、Tailwind CSS 与 Reanimated 构建，复制源码或安装即用。想给页面加动效又不想从零写动画时，可以直接从这里挑。
官网：beui.dev · GitHub：starc007/ui-components（1,946 星，MIT 开源；另有 React Native 版 beui-native）
6. Sketchbook UI：手绘笔记本风 React 组件库
Sketchbook UI 是另一个手绘风：20 个完整类型化组件，手绘 SVG 边框、纸张纹理、铅笔线条细节，适合个人项目、落地页，或者任何想让人眼前一亮的地方。除 React 外零运行时依赖，gzip 后不到 70 kB，npm install sketchbook-ui 就能装。
官网：sarthakrawat-1.github.io/sketchbook-ui · GitHub：SarthakRawat-1/sketchbook-ui（312 星，MIT 开源）
7. AffectUI：专为 AI 产品做的 React 组件库
AffectUI 是为 AI 产品准备的 React 组件、页面与区块：Agent 树、工具调用、执行轨迹、交接与审批卡片，Agent 可观测性做得非常深——这正是普通组件库里没有的东西。每个组件一个文件、零依赖，自己加进项目，或者让 Claude、Cursor 代劳。
官网：affectui.com · GitHub：flohoeller/affectui（599 星，MIT 开源）
怎么选
要手绘风，看 Looseleaf 与 Sketchbook UI，前者贴着 shadcn/ui 用，后者更轻、独立成库；要动效，看 Rare UI 与 beUI；做移动端看 ExpoKit，记得液态玻璃与 3D 要 Pro；做 AI 产品直接看 AffectUI；要液体物理效果、且项目是 Vue 技术栈，看 goopUI。站内同类设计资源可参考 5 个免费设计灵感网站、三个免费设计工具：Doop、Desigma、Orcanva，以及 Meta 开源 Astryx 设计系统。
转自 X 摸鱼巨匠（@chatgptastra）的帖子，原文链接
