Magnetic Nav
Nav links magnetically attract the cursor; elastic spring snaps back on leave.
Component Showcase
Choose Installation Method
Select how you want to add this component to your project
Run command in your project root
$ npx @melonui-dev/cli add magnetic-nav
How to import and use
app/page.tsx
import { MagneticNav } from "@/components/magnetic-nav";
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center bg-[#050505] p-8">
<MagneticNav />
</main>
);
}AI Automation Agent Prompt
Feed this prompt to Claude, ChatGPT, or Gemini to quickly write custom integrations, layouts, or configure props for this component on your system.
I want to integrate the MelonUI "Magnetic Nav" component into my project.
To add it, run the command: `npx @melonui-dev/cli add magnetic-nav`
Please import and merge this component into my project, and write the code showing how to customize its parameters and content.