Installation

Requirements

• A React project with shadcn/ui already set up.
• Tailwind CSS v4 and TypeScript — both are configured for you when you run npx shadcn@latest init.
• The @/lib/utils helper (the cn function) that shadcn creates during setup.

1. Set up shadcn/ui

If you already use shadcn/ui, skip this step. Otherwise run init once in your project:

npx shadcn@latest init

npx shadcn@latest init

Choose the defaults you like — the blocks only read the theme tokens that init generates.

2. Add a block

Run the add command with the block you want. Replace area-chart with any block name:

npx shadcn@latest add https://prequelui.terravidhal.me/r/area-chart.json

npx shadcn@latest add https://prequelui.terravidhal.me/r/area-chart.json

The CLI copies the block into your components folder and installs the dependencies it needs (motion and lucide-react where used). From there the code is yours.

Manual install

If you prefer not to use the CLI, you can add a block by hand:

1. 1

   Copy the file

   Take the block source from the registry and place it in your project, for example components/area-chart.tsx.

2. 2

   Install the dependencies

   Install the animation and icon libraries. Check the block's imports and add only the ones it uses.

   npm install motion lucide-react

   npm install motion lucide-react

3. 3

   Keep the cn helper

   Blocks import cn from @/lib/utils. If the path does not exist in your project, create it — shadcn's init does this for you.

   lib/utils.ts

   import { clsx, type ClassValue } from "clsx";
   import { twMerge } from "tailwind-merge";
   
   export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
   }

   import { clsx, type ClassValue } from "clsx";
   import { twMerge } from "tailwind-merge";
   
   export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
   }

Project structure

After installation a typical project looks like this:

components/
  area-chart.tsx      # the block you installed
  ui/                 # your shadcn/ui components
lib/
  utils.ts            # the cn helper
app/                  # your app

components/
  area-chart.tsx      # the block you installed
  ui/                 # your shadcn/ui components
lib/
  utils.ts            # the cn helper
app/                  # your app

Updating a block

There is no package to keep up to date. Because the code is copied into your project, an installed block stays exactly as you left it. When a new version ships, run the add command again or copy the updated file manually.