components.json

The components.json file holds your project configuration for the shadcn CLI: where your CSS lives, your path aliases, and which registries the CLI knows about.

If you already use shadcn/ui, you have this file in your project root. Otherwise, create it with:

pnpmnpmyarnbun
pnpm dlx shadcn@latest init
Copy

Example Configuration#

A typical components.json for a Next.js App Router project with the Jolocky namespace added:

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://www.jolocky.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${JOLOCKY_LICENSE_KEY}"
      }
    }
  }
}

How Jolocky Items Use This File#

• File locations: Jolocky items set an explicit target path for every file, so they always install into components/footers/<item>/ (inside src/ if your project uses a src directory). Files inside an item import each other with relative paths.
• Styles: Jolocky items do not modify your global stylesheet. Each footer carries its own scoped CSS, so the tailwind settings do not affect how it looks.
• Aliases: The @/ alias is what lets you write import { AuroraDriftFooter } from "@/components/footers/aurora-drift" in your own code.
• rsc: Footers start with the "use client" directive, so you can render them from a Server Component page in the Next.js App Router.

The other fields (style, tailwind, aliases.ui, and so on) are used by shadcn/ui components. See the shadcn components.json documentation for details.

The @jolocky Registry Namespace#

A namespace lets you install items by name instead of typing full URLs. The {name} placeholder in the URL is required; the CLI replaces it with the item name.

Free and Pro Items#

Use the object form with an Authorization header:

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

Then add your license key to .env.local (or .env):

CopyJOLOCKY_LICENSE_KEY="YOUR_LICENSE_KEY"

The CLI expands ${JOLOCKY_LICENSE_KEY} from the environment. If the variable is missing, the CLI stops with an error asking you to set it in .env or .env.local.

Free Items Only#

If you only install free items, use the string form, which sends no header and needs no environment variable:

Copy{
  "registries": {
    "@jolocky": "https://www.jolocky.com/r/{name}.json"
  }
}

Installing by Name#

With either form in place:

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

Always use https://www.jolocky.com. Requests to the apex domain jolocky.com are redirected to www, and the Authorization header is dropped on that redirect.