Installation

$ npx shadcn@latest add https://ssych.com/r/accordion.json

Swap accordion for any component slug — each page shows its own command in its Code tab. Run npx shadcn@latest init first if your project isn't set up for shadcn yet.

Vite: before init, add the @/* alias to both tsconfigs + resolve.alias, and install @types/node.

Every component is free and public — no account, no gate. The composed screens on /library/dashboards and /library/landing-pages are the paid tier; installing one without owning it writes a placeholder file naming where to buy it, never the source.

$ npm install motion clsx tailwind-merge lucide-react

What most components share. Anything rarer — a chart runtime, an icon set one component reaches for — comes down with that component, because the CLI installs each item's own dependencies.

Create src/lib/utils.ts:

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

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