Pro

Manual Installation

PreviousNext

Copy a Jolocky item's files into your project by hand, without the shadcn CLI.

You do not need the shadcn CLI to use a Jolocky item. Every item is plain React and TypeScript, so you can copy its files into your project yourself.

1. Check Your Project

You need a React project with TypeScript (.tsx files). Tailwind CSS and a components.json are not required for manual installation, because each footer ships its own CSS.

2. Copy the Files

  1. Open the item in the Sections catalog and switch to the Code tab.
  2. The file tree shows every file and its path, for example components/footers/aurora-drift/aurora-drift-footer.tsx.
  3. Create the same folders in your project and copy each file into place. Keep the folder structure: the files import each other with relative paths.

Pro items' code is locked on the item page until you unlock it with an active Pro license.

You can also read an item's files directly from its registry JSON. For a free item:

curl https://www.jolocky.com/r/aurora-drift.json

Each entry in files has a target (where the file goes) and content (the source code).

3. Install npm Dependencies

Check the item's dependencies in its registry JSON and install them. Most items have none. Sonar Terrain needs three:

pnpm add three
npm install -D @types/three

The three package does not include TypeScript types, so TypeScript projects also need @types/three.

4. Render the Component

Import the footer from the folder's index.ts. With an @/* alias pointing at your project root (or src/):

import { AuroraDriftFooter } from "@/components/footers/aurora-drift"
 
export function SiteFooter() {
  return <AuroraDriftFooter />
}

Without an alias, use a relative import path instead.