components.json

The components.json file defines your project configuration. The registry CLI reads this file to determine where to place imported blocks, how path aliases are resolved, and how your Tailwind CSS setup is structured.

If you already use shadcn or Tailwind CSS, you likely already have this file in your project root. If you are starting fresh, initialize your project using:

pnpmnpmyarnbun
pnpm dlx shadcn@latest init
Copy

Recommended Configuration for Jolocky#

Here is the recommended components.json file for modern Next.js and React projects consuming Jolocky sections:

Copy{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "hooks": "@/hooks",
    "lib": "@/lib",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@jolocky": {
      "url": "https://jolocky.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${JOLOCKY_LICENSE_KEY}"
      }
    }
  }
}

Configuration Properties#

style#

Defines the visual baseline style for primitive elements. Jolocky is optimized for the clean aesthetics of the new-york style.

rsc#

Enables React Server Components awareness. When set to true, the CLI retains the use client directives on interactive client components while letting server wrappers remain on the server.

tsx#

Specifies TypeScript output. Jolocky code trees are built with strict TypeScript for reliable type safety.

tailwind.config#

For Tailwind CSS, leave this property empty. Tailwind CSS uses CSS native imports inside your global stylesheet rather than a JavaScript configuration file.

tailwind.css#

Path to your main stylesheet, typically app/globals.css in Next.js App Router projects.

tailwind.cssVariables#

Must be set to true. Jolocky kinetic blocks, glassmorphic cards, and surface lighting rely on CSS variables for dark mode and semantic color themes.

aliases#

Defines how imported files are organized inside your project directory:

• aliases.components: Root directory for composite blocks and section templates.
• aliases.ui: Directory for base interface primitives.
• aliases.hooks: Directory for interactive event listeners and custom animation hooks.
• aliases.lib: Directory for utility functions and helper modules.
• aliases.utils: Path to your class name merge helper, typically @/lib/utils.

Setting Up the Jolocky Registry Namespace#

Adding the @jolocky registry namespace allows you to install sections using shorthand syntax instead of typing full URLs:

Copy{
  "registries": {
    "@jolocky": {
      "url": "https://jolocky.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${JOLOCKY_LICENSE_KEY}"
      }
    }
  }
}

Once configured with your environment variable, you can install any section with:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @jolocky/aurora-drift
Copy