Rob Austin avatar

Rob Austin - Aug 20, 2025

Shadcn Private Registry Access with Namespaced Registries

We’re excited to announce support for Shadcn CLI namedspaced registries and authentication. This means improved API key authentication for our private shadcn registry. You will be able to access all our pro blocks and components from the CLI with an env variable. This will allow usage with MCP servers and and other developer workflows.

📋 components.json Configuration

The new registry system integrates seamlessly with the new official shadcn CLI and is configured in your projects components.json file:

{  "registries": {    "@shadcnblocks": {      "url": "https://www.shadcnblocks.com/r/{name}",      "headers": {        "Authorization": "Bearer ${SHADCNBLOCKS_API_KEY}"      }    }  }}

Getting Started

1. 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.local (for Next.js)SHADCNBLOCKS_API_KEY=sk_live_your_api_key_here

3. Update components.json

Add the 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://www.shadcnblocks.com/r/{name}",      "headers": {        "Authorization": "Bearer ${SHADCNBLOCKS_API_KEY}"      }    }  }}

4. Install Components

Use shadcn to install any block.

npx shadcn add @shadcnblocks/hero125npx shadcn add @shadcnblocks/pricing3npx shadcn add @shadcnblocks/features8

Authentication Methods

Our registry supports multiple authentication methods for maximum flexibility:

curl -H "Authorization: Bearer sk_live_your_api_key" \  https://www.shadcnblocks.com/r/hero125

2. API Key in X-API-Key Header

curl -H "X-API-Key: sk_live_your_api_key" \  https://www.shadcnblocks.com/r/hero125

4. Query Parameter (Legacy)

curl "https://www.shadcnblocks.com/r/hero125?token=your_jwt_token"

CI/CD Integration

API keys are perfect for continuous integration and deployment pipelines:

GitHub Actions Example

name: Buildon: [push]jobs:  build:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v3            - name: Setup Node.js        uses: actions/setup-node@v3        with:          node-version: '18'                - name: Install dependencies        run: npm install              - name: Install shadcn components        env:          SHADCNBLOCKS_API_KEY: ${{ secrets.SHADCNBLOCKS_API_KEY }}        run: |          npx shadcn add @shadcnblocks/hero125          npx shadcn add @shadcnblocks/pricing3                - name: Build        run: npm run build

Docker Example

# DockerfileFROM node:18-alpineWORKDIR /appCOPY package*.json ./RUN npm install# Copy source and configCOPY . .# Install private components during buildARG SHADCNBLOCKS_API_KEYENV SHADCNBLOCKS_API_KEY=$SHADCNBLOCKS_API_KEYRUN npx shadcn add @shadcnblocks/hero125RUN npm run buildEXPOSE 3000CMD ["npm", "start"]

Build with:

docker build --build-arg SHADCNBLOCKS_API_KEY=sk_live_your_key .

From URL-based to Namespace-based

Old way:

npx shadcn add "https://www.shadcnblocks.com/r/hero125?token=your_token"

New way:

npx shadcn add @shadcnblocks/hero125

Troubleshooting

Common Issues

❌ “Authentication required for pro blocks”

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

❌ “Registry not configured”

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

❌ “Invalid API key”

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

👉 Generate API Key in Dashboard (Pro users+)