Libraries.dev

环境要求

• Node.js 20（仓库用 .node-version 固定为 Node 20）
• npm 包管理器
• 一个 React 项目（组件以包裹已有元素的方式使用）
• 只按需安装所需的效果包，无需安装整套仓库

安装与启动步骤

1. 1确认运行环境

   README 说明仓库用 .node-version 固定 Node 20，构建脚本也以此版本运行，本地开发建议保持一致。

   node -v

   复制

2. 2安装效果组件包

   每个效果都是独立的 npm 包，按需安装一个或多个，包名依次为 border-beam、thinking-orbs、liquid-gooey、voice-glow、metal-fx、img-fx。

   npm install border-beam
   npm install thinking-orbs
   npm install liquid-gooey
   npm install voice-glow
   npm install metal-fx
   npm install img-fx

   复制

3. 3在组件中包裹使用

   从包中导入对应组件，直接包裹你已有的按钮、卡片等元素。原有标签语义保持不变，特效渲染在元素周围或背后。

   import { BorderBeam } from "border-beam";
   
   <BorderBeam>
     <button>Get started</button>
   </BorderBeam>

   复制

4. 4用 Prompt 快速接入

   也可在 libraries.dev 各库页面点 Copy prompt，把整份参数说明粘进 Claude Code、Cursor 或 Codex，由智能体安装并接入你的主题。

如何确认成功

启动开发服务器后，页面上原有按钮/卡片正常显示，且出现沿边框流动的柔光等对应特效即接入成功。

常见问题

注意事项

• 本项目是一个 monorepo 式集合，各效果库分别从 npm 安装，不要试图整体 clone 后引入。
• README 中的 Cloudflare Pages、GitHub Pages、CNAME 等部署说明面向站点维护者，普通使用者无需配置。
• thinking-orbs 还带有 React Native 与 SwiftUI 原生移植，但 README 说明这两者尚未发布。