SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场react-bits-pro

react-bits-pro

前端与建站

查看项目

更新于 10-22 11:33

技能介绍

用途

React Bits Pro 是一个兼容 shadcn 的高级注册表，用于把现成的动画组件、页面区块和落地页模板以真实源码文件形式安装到 React/Next.js 项目中。安装后的文件归用户所有，可直接编辑，而非 npm 包依赖。

主要能力

产品分为五类：

  • 动画组件：150 个，每个提供两种变体，通过 @reactbits-starter 注册表安装，需要 -tw 或 -css 后缀。Starter 层及以上可用。
  • 营销区块：280 个，覆盖 22 个分类，含 42 个可组合 Bento 磁贴，通过 @reactbits-pro 安装，无后缀。用于公开落地页与营销页，如 hero、定价、FAQ、用户评价等。Pro 层及以上可用。
  • App UI 区块：300 个，覆盖 38 个分类，通过 @reactbits-pro 安装，无后缀。用于登录后的产品界面，如应用外壳、侧边栏、仪表盘、数据表格、分析、命令菜单、设置、账单、引导流程、看板、AI 聊天与智能体计划/审批/用量界面。Pro 层及以上可用。
  • Agent Kit：20 项，包括设计技能、页面提示词、配方与安装技能，Pro 层及以上可用，其中一项免费，setup 技能 Starter 层可用。
  • 落地页模板：15 个，需 Ultimate 层，其中一个免费，另有单独购买选项。模板为网站下载 .zip（需登录），不走 CLI 安装。

层级为 Starter → Pro → Ultimate，每层包含下层全部内容。许可密钥前缀可区分层级：rbps- 为 Starter，rbpp- 为 Pro，rbpu- 为 Ultimate。用 Starter 密钥安装 Pro 条目会返回 403，属权限结果而非构建错误。

使用方式

前置条件：项目根目录有 components.json（缺失则运行 npx shadcn@latest init）、lib/utils.ts 中的 cn() 辅助函数（依赖 clsx 与 tailwind-merge）、Tailwind 配置（-tw 组件与所有区块均需要，推荐 Tailwind v4），以及有效许可密钥。

第一步，把密钥写入根目录 .env.local：

REACTBITS_LICENSE_KEY=rbpp-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

切勿提交 .env.local，确保 .gitignore 包含它。若 CLI 读不到该变量，可在 shell 中 export 后再运行 add。

第二步，在 components.json 中合并 registries 字段，只添加该键，不改动 $schema、style、tailwind、aliases 等已有字段：

{ "registries": { "@reactbits-starter": { "url": "https://pro.reactbits.dev/api/r/starter/{name}.json", "headers": { "Authorization": "Bearer ${REACTBITS_LICENSE_KEY}" } }, "@reactbits-pro": { "url": "https://pro.reactbits.dev/api/r/pro/{name}.json", "headers": { "Authorization": "Bearer ${REACTBITS_LICENSE_KEY}" } } } }

即使只用区块，也应配置 @reactbits-starter，它也是安装本技能文件的方式。

第三步，安装条目：

npx shadcn@latest add @reactbits-starter/silk-waves-tw # 组件（Starter+） npx shadcn@latest add @reactbits-starter/silk-waves-css # 组件（非 Tailwind 项目） npx shadcn@latest add @reactbits-pro/hero-1 # 营销区块（Pro+） npx shadcn@latest add @reactbits-pro/ai-chat-1 # App UI 区块（Pro+） npx shadcn@latest add @reactbits-pro/skill-swiss-grid # Agent Kit 技能（Pro+） npx shadcn@latest add @reactbits-pro/prompt-saas npx shadcn@latest add @reactbits-pro/recipe-saas-homepage

可一次安装多个；安装前可用 npx shadcn@latest view <条目> 查看。

安装路径遵循 components.json 的别名（如有 src/ 目录则相应调整）。默认：组件在 components/react-bits/<slug>.tsx，-css 变体附带同目录 .css 文件；营销区块与 App UI 区块在 components/blocks/<slug>.tsx；Agent Kit 技能在 .claude/skills/<slug>/SKILL.md，提示词在 prompts/<slug>/PROMPT.md，配方在 recipes/<slug>/RECIPE.md 与 plan.json。shadcn CLI 会自动安装条目的 npm 依赖与注册表依赖。

导入要点

组件与 App UI 区块均为默认导出：

import SilkWaves from "@/components/react-bits/silk-waves"; import AiChat from "@/components/blocks/ai-chat-1";

营销区块导出方式混杂，标识符也不一定与 slug 对应，例如 404-3 导出 NotFound3，cta-3 导出 CTA3 而 cta-4 导出 Cta4。安装后必须确认导出行再导入，可用：

grep -E "^export (default )?function " components/blocks/<slug>.tsx

若为 export default function，可任意命名默认导入；若为 export function X()，则必须用花括号精确导入同名标识符。

适用场景

  • 为项目添加动画 UI：着色器、粒子、3D、WebGL、光标效果、文字/动画/GSAP 动效。
  • 快速插入营销区块（hero、定价、功能、导航、页脚、FAQ、CTA 等）拼装落地页。
  • 构建登录后产品界面：应用外壳、侧边栏、仪表盘、数据表格、分析、命令菜单、设置、账单、引导、看板。
  • 构建 AI 或智能体界面：聊天、提示词输入、工具调用、智能体计划、审批、用量。
  • 组合动画 Bento 网格，或使用 Bento Builder 生成的代码或智能体提示词。
  • 向已有页面添加区块并使其匹配现有设计（字号、颜色、间距、容器宽度、圆角），编辑已安装源码是预期行为。
  • 安装 Agent Kit 设计技能、页面提示词或整页配方。

限制与注意事项

  • 不用于构建通用 shadcn/ui 基础控件（按钮、对话框等），它们来自标准 shadcn 注册表。
  • 组件必须带 -tw 或 -css 后缀，区块不带后缀，名称不匹配会返回 404。
  • 每个组件需且仅需选择一种变体：-tw 用于 Tailwind 项目（默认选择），-css 用于非 Tailwind 项目。区块仅有 Tailwind 单文件版本，无变体。
  • 营销区块、App UI 区块与 Agent Kit 均需 Pro 或 Ultimate；模板下载需 Ultimate。若用户层级不覆盖请求，应直接说明，不要重试安装。
  • 许可密钥属机密，只能放 .env.local，不得提交或硬编码。
  • 不得删除 "use client" 指令，所有组件与区块都是客户端组件。
  • WebGL/着色器组件需要显式尺寸的父容器。
  • App UI 区块需要高度受限的父容器，其根为 h-full min-h-[Npx]；放入无高度父容器会导致滚动区域塌陷。
  • Bento 磁贴不使用 App UI 主题，应置于 .rb-theme-scope 之外，且不应用 App UI 的强调色、基础、字体或圆角覆盖；它们仍跟随站点常规明暗模式，通过编辑自身源码定制。
  • 2026 年 9 月新增 16 个组件、42 个 Bento 磁贴、Bento Builder 及四个模板（Agentframe、Cloudlight、Imageworks、Sparkdesign）。
  • 资料尚未提供各条目的完整分类清单、标识符对照全表、模板单独购买的具体价格与计费方式等细节。