components.json

The components.json file is required for ShadcnStore blocks to work properly. It tells the shadcn/ui CLI where to place components and how to configure them.

Why is it Required?

The components.json file provides:

• Component paths: Where to install components in your project
• Import aliases: Path aliases like @/components and @/lib/utils
• Styling configuration: Whether to use CSS variables or utility classes
• Tailwind setup: Base color, CSS file location, and configuration
• Registry configuration: Custom registries for ShadcnStore blocks ⭐

ShadcnStore Registry Configuration

To use ShadcnStore blocks with the modern namespace approach, add this to your components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  },
  "registries": {
    "@shadcnstore": {
      "url": "https://shadcnstore.com/r/{name}.json"
    },
    "@shadcnstore-pro": {
      "url": "https://shadcnstore.com/r/{name}.json?token=${SHADCNSTORE_TOKEN}",
      "headers": {
        "Authorization": "Bearer ${SHADCNSTORE_TOKEN}"
      }
    }
  }
}

Environment Variable

Make sure to set SHADCNSTORE_TOKEN=your-license-key in your .env.local file for premium blocks to work.

Registry Benefits

The namespace approach provides several advantages:

• Clean Commands: Use npx shadcn@latest add @shadcnstore/hero-1 instead of long URLs
• Automatic Authentication: Environment variables handle authentication automatically
• Better Organization: Clear separation between free (@shadcnstore) and premium (@shadcnstore-pro) blocks
• Future-Proof: Compatible with the latest shadcn/ui CLI features

Basic Configuration

Here's a minimal components.json for most projects (without ShadcnStore registries):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

Framework-Specific Examples

Next.js

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  },
  "registries": {
    "@shadcnstore": {
      "url": "https://shadcnstore.com/r/{name}.json"
    },
    "@shadcnstore-pro": {
      "url": "https://shadcnstore.com/r/{name}.json?token=${SHADCNSTORE_TOKEN}",
      "headers": {
        "Authorization": "Bearer ${SHADCNSTORE_TOKEN}"
      }
    }
  }
}

Vite

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  },
  "registries": {
    "@shadcnstore": {
      "url": "https://shadcnstore.com/r/{name}.json"
    },
    "@shadcnstore-pro": {
      "url": "https://shadcnstore.com/r/{name}.json?token=${SHADCNSTORE_TOKEN}",
      "headers": {
        "Authorization": "Bearer ${SHADCNSTORE_TOKEN}"
      }
    }
  }
}

Remix

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/tailwind.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "~/components",
    "utils": "~/lib/utils",
    "ui": "~/components/ui"
  },
  "registries": {
    "@shadcnstore": {
      "url": "https://shadcnstore.com/r/{name}.json"
    },
    "@shadcnstore-pro": {
      "url": "https://shadcnstore.com/r/{name}.json?token=${SHADCNSTORE_TOKEN}",
      "headers": {
        "Authorization": "Bearer ${SHADCNSTORE_TOKEN}"
      }
    }
  }
}

Key Configuration Options

• style: Choose between "default" and "new-york" design styles
• cssVariables: Use CSS variables (recommended) or utility classes
• baseColor: Base color for your theme (neutral, gray, slate, etc.)
• aliases: Import path aliases for clean imports
• registries: Custom registries for third-party components like ShadcnStore

Registry Configuration Details

The registries field allows you to define custom registries:

• @shadcnstore: For free blocks, no authentication required
• @shadcnstore-pro: For premium blocks, uses environment variable authentication
• url: Template URL where {name} is replaced with the component name
• headers: Optional authentication headers for private registries

For complete configuration details and all available options, visit the official shadcn/ui components.json documentation.