Skip to content
WANCRAFT

Installation

Copy-and-paste and registry installation, step by step.

Two supported methods

Both methods produce the same result: one file in components/ui/ plus any npm dependencies it declares. Choose whichever fits your workflow.

Method 1 — Registry (shadcn CLI)

In a project that has a components.json (created by npx shadcn@latest init), add any component by URL:

npx shadcn@latest add https://wancraft.my/r/tilt-card.json

The CLI writes components/ui/tilt-card.tsx (respecting your configured ui alias) and installs the dependencies listed in the registry item. Details and the namespace setup are in Registry Installation.

Method 2 — Copy and paste

  1. Open the component page and note its dependencies in the Installation section.
  2. Install them, e.g. npm install motion (some components need nothing).
  3. Copy the source from the Code tab into components/ui/<slug>.tsx.
  4. Import it with your path alias: import { TiltCard } from "@/components/ui/tilt-card".

Path aliases

Generated examples import from @/components/ui/<slug>. If your project uses a different alias or folder, adjust the import — the component files themselves never import from your project, so nothing else needs to change.