Installation

React 19, Tailwind CSS v4, and TypeScript. Next.js, Vite, and React Router all work.

If your project doesn't have a components.json yet, initialize it:

npx shadcn@latest init

Each component has its own URL in the registry. The CLI installs its dependencies and any components it builds on.

To use short names, add the registry to components.json, then run npx shadcn@latest add @lode/button.

{
  "registries": {
    "@lode": "https://lodeui.com/r/{name}.json"
  }
}

Install the shared dependencies and add the cn helper:

npm install motion lucide-react clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Then copy a component's source from the Installation section of its page.