Shadcn CLI

All of our blocks are compatible and downloadable using the official shadcn CLI.

We support the new namespaced registries and authentication. This feature provides improved API key authentication for our private shadcn registry, allowing you to access all our pro blocks and components directly from the CLI with environment variables. This enables seamless integration with MCP servers and other developer workflows.

Getting Started

1. Ensure your project has a components.json

npx shadcn@latest init

Read the official shadcn getting started guide for full installation instructions.

2. Generate Your API Key

Visit your dashboard and navigate to the API Keys section:

1. Click “New API Key”
2. Give your key a descriptive name (e.g., “Development”, “CI/CD Pipeline”)
3. Optionally set an expiration date
4. Copy the generated key

2. Configure Your Environment

Add your API key to your environment variables:

.env

SHADCNBLOCKS_API_KEY=sk_live_your_api_key_here

3. Update components.json

Add the a namespaced registry configuration to your components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@shadcnblocks": {
      "url": "https://shadcnblocks.com/r/{name}",
      "headers": {
        "Authorization": "Bearer ${SHADCNBLOCKS_API_KEY}"
      }
    }
  }
}

4. Install Components

Use shadcn to install any block from our registry:

npx shadcn add @shadcnblocks/hero125
npx shadcn add @shadcnblocks/pricing3
npx shadcn add @shadcnblocks/features8

Troubleshooting

Common Issues

❌ “Authentication required for pro blocks”

Possible causes:

• API key not set in environment variables
• Incorrect environment variable name
• API key doesn’t start with sk_live_

Solutions:

1. Verify your API key is correctly set in environment variables
2. Check that the SHADCNBLOCKS_API_KEY variable name matches exactly
3. Ensure the key starts with sk_live_

❌ “Registry not configured”

Possible causes:

• Missing registries section in components.json
• Incorrect namespace configuration
• Missing URL template placeholder

Solutions:

1. Verify your components.json includes the registries section
2. Check that the namespace @shadcnblocks is defined
3. Ensure the URL template includes {name} placeholder

❌ “Invalid API key”

Possible causes:

• Expired API key
• Revoked API key
• Incomplete key format

Solutions:

1. Check if the key has expired in your dashboard
2. Verify the key hasn’t been revoked
3. Ensure you’re using the complete key (starts with sk_live_)