Watermelon UI

Watermelon UI 是一个面向 React 开发者的开源 UI 注册表，提供可复制到项目中的组件、动画交互、Blocks、仪表盘、模板和完整页面展示。它的重点不是让你安装一套封闭的组件包，而是按需选取源码并继续修改。对正在做后台、落地页或产品界面的开发者来说，真正需要判断的是素材粒度、项目兼容性和接入后的维护成本，而不只是预览图是否好看。

源码进入项目，换来控制权也带来维护责任

Watermelon UI 的官方仓库把自身描述为可安装的 UI 资产目录。组件、Blocks、Dashboards、Templates 和基础变体分别保存在不同目录，生成后的注册表 JSON 位于 public/r/。选中的文件会进入自己的代码库，因此可以改结构、样式和交互，不必等待上游提供主题选项。

这种方式与引用一个长期自动升级的整包组件库不同：源码归项目维护后，上游修复不会自动覆盖本地修改。采用前应记录组件来源、依赖和本地改动；日后需要同步新版时，再比较差异，而不是直接替换整个目录。

先按交付粒度选择入口

官网公开 API 也把目录划分为 animated-components、blocks、dashboards、templates 和 showcases 五类。页面已经有框架时，从单个组件或 Block 开始更容易控制改动范围；尚未确定整体方向时，可以先看 Showcase，但展示页本身不等于已接通登录、支付或真实数据。

用 Accordion 判断一个组件能否接入

以官方注册表中的 accordion 条目为例，元数据列出的目标文件是 components/ui/accordion.tsx，依赖包含 @radix-ui/react-accordion 和 lucide-react。这比“支持 React”更有判断价值：你可以先检查项目是否允许新增这些依赖、目标目录是否与现有别名一致，以及团队是否愿意维护进入代码库的组件源码。

1. 在 Watermelon UI 中找到目标组件，查看源码文件、依赖和关联的注册表依赖。
2. 对照现有项目的 React、Tailwind CSS、TypeScript 与路径别名配置。官方仓库当前采用 React 19、TypeScript、Tailwind CSS 4、Vite 和 shadcn 注册表工具，这些是兼容性参照，不代表旧项目无需调整。
3. 按官网当前提供的安装或复制方式加入组件，启动自己的项目，而不是只停留在在线预览。
4. 替换为真实文本后检查展开与收起、键盘焦点、暗色主题和窄屏布局。交互状态正常、控制台无缺失依赖，且样式没有覆盖项目现有规则，才算完成一次可用性验证。

上述 Accordion 依赖与文件路径来自官方注册表元数据；这里没有把未运行的代码写成实测结果。其他条目可能带有不同的第三方依赖或内部组件依赖，仍需逐项查看。

需要整个目录时，可在本地运行官方仓库

如果目的是批量评估组件、提交修改或研究注册表结构，可以按官方仓库的首选工作流启动本地开发环境。需要 Git、Bun，以及适合当前前端项目的 Node.js 环境；以下命令会克隆仓库、安装依赖并启动 Vite 开发服务：

git clone https://github.com/WatermelonCorp/watermellon-registry.git
cd watermellon-registry
bun install
bun run dev

浏览器能够打开本地开发页只是第一层结果。准备贡献或部署前，还应运行仓库列出的 bun run lint 与 bun run build；修改注册表内容时，再使用 bun run registry:build 生成资产。构建通过可以证明类型检查和打包流程完成，不能替代对具体组件交互与可访问性的检查。

公开 API 适合检索目录，不负责安装组件

Watermelon UI 还提供无需认证的 v1 公共 API，规范入口为 https://ui.watermelon.sh/api/v1。/catalog/summary 返回各类目录数量，/catalog/entries 可按 kind、category 和 query 筛选，单条入口则按 kind 与 slug 读取标题、描述、分类、图片和页面路径。它适合做目录搜索、内部选型页或智能代理的结构化检索。

API 返回的是目录元数据，不会替你修改项目文件。若使用未带版本号的 /api/* 兼容路径，应留意响应中的弃用与 Sunset 信息；新接入优先使用 /api/v1。自动化流程还应读取限流响应头，不要把公开且免登录误解成无限请求。

MIT 许可覆盖代码，第三方资产仍需单独辨认

官方仓库采用 MIT License，允许使用、复制、修改、合并、发布、分发、再许可和销售软件副本，条件是保留版权声明与许可声明；软件按“原样”提供，不附带担保。这让组件源码适合继续改造，也意味着采用方需要自行承担集成、测试和维护责任。

许可判断应落到实际取用的文件。仓库代码适用 MIT 并不自动证明示例中的外部图片、品牌标识或第三方服务内容拥有相同授权。准备公开发布或商业使用前，保留仓库许可证，并检查组件引用的外部素材与依赖各自的许可。若只需要无需写代码的在线建站服务，Watermelon UI 并不是同类产品；它更适合作为开发项目中的源码与界面结构起点。