联系与投稿

内容类型

为你的页面,挑一箱好玩的组件

免费的网页交互与动效,先点开、拖一拖、玩一玩。 觉得对味,再看文档和代码,把它带进你的作品。

收藏组件

41

持续精选中

真实演示

100%

先看效果,再做选择

将玻璃文件夹的 React 代码复制到 Claude Code 和 Codex,并逐步完成添加。

收藏箱

浏览全部

工作原理

发现,理解,再应用

组件收藏

搜索组件、动效与交互

来源与许可

追溯原始设计与源码构成

GlassFolder

磨砂玻璃文件夹,点击展开真实文件卡片,支持添加文件和键盘菜单。

来源 用户提供的 React 源码,已在本项目适配 许可 以条目中的来源与许可说明为准 源码 React 版 4 个文件 · 673 行

应用预览

真实运行演示

独立演示

不限定框架

一个组件,六种框架版本

玻璃文件夹示例提供 React、Vue、Svelte、Solid、Preact 与原生 TypeScript 版本。使用前请查看来源、依赖和许可说明。

组件源码

4 个文件 673 行
npm install react react-dom
import { GlassFolder } from "./GlassFolder"; export default function App() { return <GlassFolder />; }
将 LeiBox 的 GlassFolder 玻璃文件夹组件集成到这个项目中。
读取组件源码
4 个文件 · 673 行
确认框架
React
添加到项目
提供用法示例
GlassFolder
演示完成 · 仅供示意

为 AI 准备就绪

让 AI 也能用好你的收藏

安装一次 LeiBox Skill,让 AI 按需求找组件、选择项目框架,并把完整源码拉进你的项目。

安装 LeiBox Skill

常见问题

你可能想知道

仅供学习使用。各条目遵循各自的来源和许可;提供参考链接或免费访问,不代表取得受保护代码、设计或素材的再分发授权。

请使用启用 JavaScript 的现代浏览器。收藏包含 DOM、SVG、Canvas 和 WebGL 实验,具体要求以组件说明为准;网站本身无需开启实验性浏览器开关。

效果通过 WebGL 或基于 vgpu 的 WebGPU 在 GPU 上渲染,动画在 React 渲染周期之外运行。组件挂载时才初始化,离开视口时暂停,卸载时释放资源,并尊重系统的减少动态效果偏好。

多数示例提供 React、Vue、Svelte、Solid、Preact 和 TypeScript 版本。请查看所选示例实际支持的框架及依赖。

代码直接复制到你的仓库,不会在你不知情时自动更新。组件改进后,可以重新运行安装命令获取最新版,也可以保留现有副本,自行继续开发。

一起收藏

下一件好设计,放进 LeiBox

收藏因好发现而不断丰富。分享一件实用、用心,或值得多看一眼的设计。

好发现,值得被收藏

发来 UI 参考、组件链接或收藏建议。请附上原始来源,让创作者的付出被看见。

投稿内容经查看后再收录。

让好灵感,随时取用

收藏让界面更出色的细节。浏览精选、追溯来源,也把你的下一次好发现分享出来。

浏览组件