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

4. Install Components

Use shadcn to install any block.

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

Authentication Methods

Our registry supports multiple authentication methods for maximum flexibility:

1. API Key in Authorization Header (Recommended)

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

2. API Key in X-API-Key Header

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

4. Query Parameter (Legacy)

curl "https://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: Build
on: [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

# Dockerfile
FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install

# Copy source and config
COPY . .

# Install private components during build
ARG SHADCNBLOCKS_API_KEY
ENV SHADCNBLOCKS_API_KEY=$SHADCNBLOCKS_API_KEY

RUN npx shadcn add @shadcnblocks/hero125
RUN npm run build

EXPOSE 3000
CMD ["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://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+)