CLI Distribution

Jolocky delivers components using standard JSON payloads served from /r/[slug].json. This endpoint conforms directly to the official registry-item schema recognized by npx shadcn add.

Registry Item Schema#

When the CLI queries an endpoint like https://jolocky.com/r/golden-hour.json, the server returns a JSON structure specifying everything required to run the component:

Copy{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "golden-hour",
  "type": "registry:block",
  "title": "Golden Hour Meadow",
  "description": "A meadow footer revealed by a paper tear, with live canvas grass that sways in the wind.",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/footers/golden-hour/golden-hour-footer.tsx",
      "content": "...",
      "type": "registry:block",
      "target": "components/footers/golden-hour/golden-hour-footer.tsx"
    },
    {
      "path": "components/footers/golden-hour/components/figure.tsx",
      "content": "...",
      "type": "registry:component",
      "target": "components/footers/golden-hour/components/figure.tsx"
    }
  ],
  "tailwind": {
    "config": {
      "theme": {
        "extend": {}
      }
    }
  }
}

How the Multi-File Bundler Works#

Jolocky includes an intelligent registry builder engine at lib/open-registry/builder.ts.

1. Static Analysis: The builder inspects the section source code and identifies imported hooks, utility functions, and sub-components.
2. Path Rewriting: The engine automatically transforms internal development paths into project-relative paths matching your components.json aliases.
3. Dependency Extraction: Package imports such as motion or lucide-react are extracted into the dependencies array so the CLI installs them into your package.json.
4. CSS Token Injection: If the section defines custom keyframes or utility variables, they are bundled directly into the JSON response for automatic addition to your stylesheet.

Installing via Namespace#

By declaring the @jolocky namespace in your components.json, you can bypass writing full URLs:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @jolocky/golden-hour
Copy