Skip to content
WANCRAFT

Getting Started

Add your first Wancraft component in under two minutes.

Prerequisites

A React project with Tailwind CSS. Next.js (App Router) is the primary target, but any React 18+ setup with Tailwind works. See Requirements for versions.

Add a component

The fastest path, if your project already uses shadcn/ui:

npx shadcn@latest add https://wancraft.my/r/magnetic-button.json

Otherwise, install the dependency and copy the file:

npm install motion

Then open Magnetic Button, switch to the Code tab, and save the source as components/ui/magnetic-button.tsx.

Use it

app/page.tsx
import { MagneticButton } from "@/components/ui/magnetic-button";

export default function Page() {
  return (
    <main className="grid min-h-dvh place-items-center">
      <MagneticButton strength={50}>Get in touch</MagneticButton>
    </main>
  );
}

Server components

Every Wancraft file starts with "use client", so you can render it directly from a Server Component page in the App Router — no wrapper needed.

Customise before you copy

Each component page has a property inspector. Adjust it until it feels right, then use Copy usage — the generated snippet contains only the props you changed. The Playground does the same with presets and an AI prompt export.