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

Basic Configuration

Here's a minimal components.json for most projects:

{
  "$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

{
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Vite

{
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Remix

{
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/tailwind.css"
  },
  "aliases": {
    "components": "~/components",
    "utils": "~/lib/utils"
  }
}

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

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