A dropzone whose target is magnetic: it leans towards the pointer on hover, follows dragged files, and snaps back with a spring.
"use client"
import { demoAdapter } from "@/examples/_demo"
import { MagneticDropzone } from "@/components/magnetic-dropzone"
export default function MagneticDropzoneExample() {
return (
<div className="w-full max-w-md">
<MagneticDropzone adapter={demoAdapter} />
</div>
)
}
Installation
npx shadcn@latest add @uploadcn/magnetic-dropzoneUsage
import { MagneticDropzone } from "@/components/magnetic-dropzone"<MagneticDropzone strength={0.35} />Pointer and dragover events feed a spring; it doesn't move at all with prefers-reduced-motion.
Props
Prop
Type