react-bits-pro

# React Bits Pro Integration You are integrating **React Bits Pro**, a premium shadcn-compatible registry of: - **150 animated components** (Starter tier and above) - **280 marketing blocks** in 22 categories (**Pro tier and above**), including 42 composable Bento tiles - **300 App UI blocks** in 38 categories (**Pro tier and above**) - **20 Agent Kit items**: design skills, page prompts, recipes and the setup skill (**Pro tier and above**, one free; setup skill available on Starter) - **15 landing-page templates** (**Ultimate tier**, one free) Items install as real source files into the user's project; the user owns and can edit them. **September 2026 adds 16 components, 42 Bento tiles, the Bento Builder, and four templates:** Agentframe, Cloudlight, Imageworks and Sparkdesign. The catalogs below include all of them. **Tier matters before you install anything.** Components are Starter. Marketing blocks, App UI blocks and the Agent Kit all require **Pro or Ultimate**. Included template downloads require **Ultimate**, with free and individual-purchase options described below. Installing a Pro item with a Starter key returns `403`, not a confusing build error, so check the tier first and tell the user plainly if their plan does not cover what they asked for. This document is the single source of truth. Follow it literally. Where it says "verify," verify: do not guess. --- ## Golden rules (read first, never break these) 1. **Check the tier before installing.** Components are Starter+. **Marketing blocks, App UI blocks and the Agent Kit are Pro+.** Included template downloads are Ultimate. A Starter key on a Pro item returns `403 Forbidden`. If the user's plan does not cover the request, say so directly rather than retrying the install. 2. **Never guess a marketing block's import statement.** Marketing block files use a _mix_ of `export default` and named `export` styles, and the identifier does **not** reliably follow the slug (`404-3` exports `NotFound3`; `cta-3` exports `CTA3` but `cta-4` exports `Cta4`). After installing one, read its `export` line and import accordingly. See [Importing installed items](#importing-installed-items). **App UI blocks are the exception: all 300 are `export default`.** 3. **Components use a `-tw` or `-css` suffix; every kind of block uses no suffix.** `silk-waves-tw` is a component; `hero-1` is a marketing block; `ai-chat-1` is an App UI block. Mismatched names return 404. 4. **The license key is a secret.** Put it in `.env.local`, never commit it, never hardcode it. 5. **Never delete the `"use client"` directive.** Every component and block is a client component. 6. **WebGL/shader components need an explicitly sized parent** (a container with width and height). 7. **App UI blocks need a height-bounded parent.** Their root is `h-full min-h-[Npx]`; drop one into a parent with no height and its scroll areas collapse. See [App UI blocks](#app-ui-blocks-pro-tier). 8. **Always harmonize.** A block is a starting point, not a finished section. When you add a block to an existing page, match the host's type scale, colours, spacing, container width and radii. When you stack several blocks, reconcile them into one system before showing the result. Editing the installed source is expected. See [Harmonizing blocks](#harmonizing-blocks-never-skip-this). 9. **Do not overwrite the user's existing `components.json` fields**: only merge in `registries`. 10. **Templates are downloads, not CLI installs.** Ultimate includes template downloads; some are also available free or through individual purchase. See [Templates](#templates-ultimate-tier). 11. **Bento tiles do not use the App UI theme.** Keep them outside `.rb-theme-scope` and do not apply App UI accent, base, font or radius overrides to them. They still follow the site's normal light/dark mode. Customize a tile by editing its own source. --- ## TL;DR: fastest correct path ```bash # 0. (once) Ensure the project is a shadcn project with the cn() helper. npx shadcn@latest init # only if components.json is missing # 1. Add the license key to .env.local (never commit it): # REACTBITS_LICENSE_KEY=rbp...-your-key # 2. Merge the two registries into components.json (see Step 3 below). # 3. Install items (components take -tw/-css; all blocks take no suffix): npx shadcn@latest add @reactbits-starter/silk-waves-tw # component (Starter+) npx shadcn@latest add @reactbits-pro/hero-1 # marketing block (Pro+) npx shadcn@latest add @reactbits-pro/ai-chat-1 # App UI block (Pro+) npx shadcn@latest add @reactbits-pro/skill-swiss-grid # Agent Kit skill (Pro+) # 4. Open the installed file, read its `export` line, then import it: # components/react-bits/silk-waves.tsx -> export default -> import SilkWaves from "@/components/react-bits/silk-waves" # components/blocks/hero-1.tsx -> export function Hero1 -> import { Hero1 } from "@/components/blocks/hero-1" # components/blocks/ai-chat-1.tsx -> export default -> import AiChat1 from "@/components/blocks/ai-chat-1" ``` If `components.json` already has the `@reactbits-starter` registry, you can also pull this skill into the project as a local file: ```bash npx shadcn@latest add @reactbits-starter/skill # writes ./SKILL.md to the project root ``` --- ## When to use this skill Use it when the user wants to: - Add React Bits Pro components, blocks, or templates to a project. - Add animated UI (shaders, particles, 3D, WebGL, cursor effects, text/Motion/GSAP animations). - Drop in pre-built marketing sections (hero, pricing, features, navigation, footer, FAQ, CTA, etc.). - Build signed-in product UI: app shells, sidebars, dashboards, data tables, analytics, command menus, settings, billing, onboarding, kanban boards. - Build AI or agent interfaces: chat, prompt inputs, tool calls, agent plans, approvals, usage. - Assemble a landing page quickly from premium blocks. - Compose an animated bento grid or use the Bento Builder's generated code or agent prompt. - Add a section to a page they already have, and make it match the existing design. - Install an Agent Kit design skill, page prompt or full-page recipe. - Mention "react bits", "reactbits", "@reactbits-starter", "@reactbits-pro", "app ui", or "agent kit". Do **not** use it to build generic shadcn/ui primitives (button, dialog, etc.). Those come from the standard shadcn registry, not React Bits Pro. --- ## Architecture overview React Bits Pro ships through the **shadcn registry protocol** over two license-authenticated registries: | Registry | Contains | Min. tier to install | Install prefix | | -------------------- | ---------------------------------------------------- | ------------------------ | ---------------------------------------- | | `@reactbits-starter` | 150 animated components (each in 2 variants) | Starter | `@reactbits-starter/<slug>-tw` or `-css` | | `@reactbits-pro` | 280 marketing blocks (22 categories) | **Pro** | `@reactbits-pro/<slug>` | | `@reactbits-pro` | 300 App UI blocks (38 categories) | **Pro** | `@reactbits-pro/<slug>` | | `@reactbits-pro` | 20 Agent Kit items (skills, prompts, recipes, setup) | **Pro** (setup: Starter) | `@reactbits-pro/skill-<slug>` etc. | Marketing blocks, App UI blocks and the Agent Kit all ship through the **same** `@reactbits-pro` registry and therefore share the same Pro entitlement. There is no separate purchase or registry for App UI or the Agent Kit. Tier hierarchy: **Starter → Pro → Ultimate** (each tier includes everything below it). | Tier | License prefix | Components | Marketing blocks | App UI blocks | Agent Kit | Templates | | -------- | -------------- | ---------- | ---------------- | ------------- | ------------- | ------------------ | | Starter | `rbps-` | ✅ 150 | ❌ | ❌ | 1 setup skill | free template only | | Pro | `rbpp-` | ✅ 150 | ✅ 280 | ✅ 300 | ✅ 20 | free template only | | Ultimate | `rbpu-` | ✅ 150 | ✅ 280 | ✅ 300 | ✅ 20 | ✅ all 15 | **Say this plainly to a Starter user who asks for an App UI block, a marketing block or an Agent Kit item: it requires Pro or Ultimate.** Do not attempt the install and let it fail with a 403. Items are written into the codebase as editable source files. They are **not** npm packages. ### Five product types: do not confuse them | Type | Source | Suffix | Delivery | Tier | | ------------------- | -------------------- | --------------------------------------- | -------------------------------- | ----------------- | | **Component** | `@reactbits-starter` | `-tw` / `-css` (required) | shadcn CLI | Starter+ | | **Marketing block** | `@reactbits-pro` | none | shadcn CLI | **Pro+** | | **App UI block** | `@reactbits-pro` | none | shadcn CLI | **Pro+** | | **Agent Kit item** | `@reactbits-pro` | `skill-` / `prompt-` / `recipe-` prefix | shadcn CLI | **Pro+** (1 free) | | **Template** | website download | n/a | `.zip` download (login required) | Ultimate (1 free) | **Marketing blocks vs App UI blocks.** Both are Pro, both install to the same directory, and both are full sections rather than primitives. The difference is what they are _for_: | | Marketing block | App UI block | | ----------- | -------------------------------------- | -------------------------------------------------- | | Purpose | Public landing/marketing page | Signed-in product interface | | Examples | hero, pricing, FAQ, testimonials | app shell, sidebar, data table, dashboard, AI chat | | Root height | Heroes may fill the viewport; content sections use `--rb-section-min-h`; Bento tiles fill grid cells | `h-full min-h-[Npx]` (fills its container) | | Density | Generous, large type | Dense, `text-[13px]` body scale | | Exports | **Mixed**: always verify | **Always `export default`** | If the user is building a landing page, reach for marketing blocks. If they are building a dashboard, admin panel, settings screen or an AI/agent surface, reach for App UI. ### Component variants (`-tw` vs `-css`) Every component exists in two functionally identical variants. **Pick exactly one per install.** - **`-tw` (Tailwind)**: styles via Tailwind utility classes and the `cn()` helper. **Default choice.** Use this whenever the project uses Tailwind. - **`-css` (vanilla CSS)**: ships a co-located `.css` file, no Tailwind required. Use only when the project does **not** use Tailwind. Blocks have **no variants**. They are Tailwind-only, single-file. ### Where files are installed Paths follow the user's `components.json` aliases (and `src/` dir if present). With defaults: | Item | On-disk path | Import alias | | ------------------ | ------------------------------------------------- | -------------------------------- | | Component (`-tw`) | `components/react-bits/<slug>.tsx` | `@/components/react-bits/<slug>` | | Component (`-css`) | `components/react-bits/<slug>.tsx` + `<slug>.css` | `@/components/react-bits/<slug>` | | Marketing block | `components/blocks/<slug>.tsx` | `@/components/blocks/<slug>` | | App UI block | `components/blocks/<slug>.tsx` | `@/components/blocks/<slug>` |