Installation

Add your license key once, register the two registries, and every component, block, Application UI section and Agent Kit file is a single command away.

Install with the CLI

Recommended: the shadcn CLI adds files and dependencies for you.

Before you start

Node.js 18 or newer
A React project with shadcn/ui initialized : run npx shadcn@latest init if you haven't
A components.json file in your project root (created by shadcn init)

Add your license key

Create or update .env.local in your project root: the same folder as package.json.

Register the registries

Add the registries section to your components.json, merging with any existing content.

@reactbits-starter serves components and the setup skill (all plans). @reactbits-pro serves blocks, Application UI and the Agent Kit (Pro & Ultimate).

Install anything

Components

All plans

Every component ships in two variants: suffix -tw for Tailwind or -css for vanilla CSS.

Blocks

Pro & Ultimate

238 marketing sections across 21 categories. Names follow category-number, so pricing-4 and faq-2 work the same way.

Application UI

Pro & Ultimate

300 blocks of product chrome: app shells, data tables, dashboards, settings and AI surfaces. Same registry, same naming rule.

Agent Kit

Pro & Ultimate

Skills, prompts and recipes install as Markdown your agent reads: skill-, prompt- and recipe- prefixes.

Let your AI agent do the installing

One file teaches Claude, Cursor or Copilot the whole registry.

React Bits Pro Skill

All plans

Installs a SKILL.md that documents every registry name, both variant suffixes and the install syntax. After this your agent can add components on request, without you looking anything up.

Agent Kit

Pro & Ultimate

Where the setup skill teaches your agent how to install, the Agent Kit tells it what to build: 8 design skills for the look, 8 page prompts for the vertical, and 3 recipes that name the exact blocks in order. Hand over a skill and a prompt together and you get a full page.

Browse the Agent Kit

No install at all

Compose the page first, take the code afterwards.

Landing Builder

BetaPro & Ultimate

Drag the marketing blocks into a full page, rewrite any text directly on the canvas, then export it four ways: a complete Next.js project, drop-in instructions for an existing one, the raw files, or a prompt for your agent. The canvas ships the same code the export does, so what you preview is what you get.

Open the builder

Manual copy & paste

No CLI required: copy code straight from the docs into your project.