For humans and agents

Install via shadcn CLI

shadcn Motion Blocks ships a componentblocks.com/r registry that the shadcn CLI and AI coding agents (Cursor, Claude Code, v0, Copilot Workspace) can install directly. 3 free blocks install with no checkout. The other 32 return HTTP 402 with a buy link.

Quickstart - one free block

From the root of any Next.js + shadcn/ui project:

npx shadcn@latest add https://componentblocks.com/r/bg-aurora-mesh

The CLI installs the block component, the shared block-config helper (as a registry dependency), and adds framer-motion to your dependencies. Import and drop the block straight into a page.

Registry endpoints

• https://componentblocks.com/r - index of every block with tier, preview URL, install URL
• https://componentblocks.com/r/{slug} - per-block registry-item JSON (free) or HTTP 402 payment-required (paid)
• https://componentblocks.com/r/block-config - shared prop-config helper, installed automatically as a dependency of any block
• https://componentblocks.com/pricing.md - machine-readable pricing
• https://componentblocks.com/llms.txt - full plain-text product summary for AI crawlers

Free tier (3 blocks)

These install without a token. Same license as the paid pack - unlimited personal and commercial use including client work.

• Background - Aurora meshfree

  Soft colour blobs drift on independent looping paths, fusing into a slow living gradient. Drop behind any content.

  npx shadcn@latest add https://componentblocks.com/r/bg-aurora-mesh

• Effect - Magnetic buttonsfree

  Buttons wrapped in a tracking field that lean toward the cursor as it approaches; the label drifts further for depth.

  npx shadcn@latest add https://componentblocks.com/r/magnetic-buttons

• Effect - Text shimmerfree

  A bright band sweeps across a headline - a moving gradient clipped to the text for a metallic sheen.

  npx shadcn@latest add https://componentblocks.com/r/text-shimmer

Paid tier (32 blocks)

EUR 3 per block or EUR 19for the full pack. When an agent or CLI hits a paid block's registry URL, it returns HTTP 402 with a structured body:

{
  "name": "pricing-spotlight",
  "type": "registry:block",
  "meta": {
    "tier": "paid",
    "price_eur": 3,
    "pack_price_eur": 19,
    "payment_required": true,
    "checkout_single": "https://buy.stripe.com/...",
    "checkout_pack": "https://buy.stripe.com/...",
    "preview": "https://componentblocks.com/blocks/pricing-spotlight"
  }
}

After purchase, the delivery email includes a tokenised install command the CLI can use without further prompts.

Working with AI coding agents

Cursor / Claude Code / Copilot Workspace

Ask the agent in plain English:

Add the bg-aurora-mesh block from shadcn-motion-blocks.
Install with: npx shadcn@latest add https://componentblocks.com/r/bg-aurora-mesh

The agent will run the CLI, the block + block-config helper are placed in your project, and you can immediately import and use it.

v0 by Vercel

v0 supports shadcn registries out of the box. Reference the URL in the prompt:

Use the bg-aurora-mesh component from
https://componentblocks.com/r/bg-aurora-mesh as the hero background.

Custom agent / programmatic install

// Discover what's available
const index = await fetch("https://componentblocks.com/r").then(r => r.json());

// Pick a free block, fetch its registry-item JSON
const item = await fetch("https://componentblocks.com/r/bg-aurora-mesh").then(r => r.json());

// Write each file to disk; install dependencies
for (const f of item.files) {
  await fs.writeFile(f.target, f.content);
}
await exec(`npm install ${item.dependencies.join(" ")}`);

FAQ

What does the shadcn CLI install do?

It fetches the registry-item JSON from https://componentblocks.com/r/<slug>, places the component file at components/blocks/<slug>.tsx, places the shared block-config helper at lib/block-config.ts, and adds framer-motion to your package.json if needed.

Which blocks are free?

Three blocks are free with no token required: bg-aurora-mesh, magnetic-buttons, text-shimmer. They install via shadcn CLI immediately. The other 32 blocks return HTTP 402 with a checkout URL — pay once, receive a tokenised install command in the delivery email.

Will it work with my existing shadcn/ui setup?

Yes. The blocks use the standard `@/lib` path alias from your components.json, depend only on framer-motion, and use Tailwind classes that work on shadcn's default theme tokens (background, foreground, muted, etc).

Can I use this with Cursor or Claude Code?

Yes — see the agent-specific examples below. The registry index at /r returns machine-readable JSON listing every block, tier, and preview URL, so an agent can discover what's available without scraping the HTML site.

Does it work without shadcn CLI?

Yes — you can copy any block's source directly from /blocks/<slug>, or fetch the JSON from /r/<slug> and extract the file content manually. shadcn CLI is the convenience path, not a requirement.