Documentation / Reference

React Bits integration

Creator Core keeps the vendor registry configuration available for individual products, but distributes no React Bits component source, examples, or proprietary agent guidance. Our own connected application components and shared motion primitives remain in /components.

Install directly into a product

Use the derived product's installed shadcn CLI with Bun. This project is already initialized with Base UI; do not run another framework or component initializer.

# Inspect a free component's files and dependencies before installing it.
bunx --bun shadcn add @react-bits/SplitText-TS-TW --dry-run

Remove --dry-run after reviewing the planned changes and the applicable vendor terms. Free registry names use the case-sensitive -TS-TW suffix. Consult the vendor installation documentation for current names and usage.

For Starter or Pro items, the product developer supplies their own REACTBITS_LICENSE_KEY in an ignored local environment file. The configured registries send it as an authorization header directly to the vendor. Never commit the key, proxy the registry, or use one developer's credentials to provide source to others. Install proprietary skills directly from the vendor into that developer's product when needed; they are not bundled here.

bunx --bun shadcn add @reactbits-starter/silk-waves-tw --dry-run
bunx --bun shadcn add @reactbits-pro/hero-1 --dry-run

Licensed component names use lowercase and -tw; blocks have no suffix. Verify current availability and entitlement with the vendor before installation. Creator Core installs, checks, and builds without a React Bits license key.

Application use and kit distribution

The free React Bits license permits incorporation into applications while restricting redistribution of the components themselves. The Starter/Pro license also restricts reusable source, boilerplate, and proprietary agent material distribution. Free-of-charge access does not establish permission to bundle components into a reusable starter.

The public kit excludes both free and licensed vendor component source. See the distribution inventory.

Do not add vendor source to Creator Core packages, registry payloads, or template releases without a grant covering that distribution. A product using vendor components must also control access to any component-source gallery it exposes. Keep copyright and license notices supplied with independently installed source. The clean public template does not include the private canonical repository's history.

Integration conventions

• Preserve the existing base-nova style, aliases, Base UI controls, and Next.js client boundaries. Install only the components the product uses.
• Inspect each source import and dependency. Keep hooks and browser APIs in Client Components and perform browser-only work in effects.
• Use local shadcn wrappers for application controls, and convert generated icon imports to direct Pixelarticons imports. The starter's default imports must work with the free icon package.
• Preserve semantic colors and the independently editable primary, accent, and neutral palettes. React Bits --rb-accent and --rb-accent-fg map to ordinary primary controls, while the brand accent scale remains for deliberate highlights.
• Keep --rb-* radius and color mappings in the application's stylesheet. A registry theme dependency can overwrite these mappings or generate malformed variable references; inspect the CSS diff after installation.
• Keep animations enabled and clean up animation resources. Use Creator Core's registered loading and motion primitives for owned application behavior; imported authored effects do not supply backend loading state.
• Keep hosted authentication and payment fields with their providers. Connect surrounding application data and actions through the existing Hexclave and Convex integration rather than treating a visual block as an implementation of those services.
• Run bun run check:components, bun run check, and bun run build:cloudflare after integration. Verify relevant keyboard interactions, narrow layouts, and both themes in the browser.

For reusable UI, read COMPONENTS.md; for application loading and motion, read LOADING_MOTION.md.