This component no longer exists. It was in atlas-ui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Magnetic Hover Demo
atlas-ui/magnetic-hover-demoRemovedExample
Example of a smooth magnetic hover interaction that subtly pulls elements toward the with using spring based motion animations.
Install it
npx shadcn@latest add https://atlasui.dev/r/magnetic-hover-demo.jsonSource
1import Link from "next/link";23import { Button } from "@/components/ui/button";4import { MagneticHover } from "@/registry/react/atlasui/magnetic-hover";56export const MagneticHoverDemo = () => {7 return (8 <div className="flex flex-col items-center justify-center gap-4">9 <MagneticHover>10 <Button>Hover Me</Button>11 </MagneticHover>1213 <div className="text-muted-foreground flex flex-wrap items-center justify-center gap-2 text-sm">14 <span>The cursor has</span>1516 <MagneticHover strength={0.5}>17 <Link18 href="#"19 className="text-foreground font-medium underline underline-offset-4"20 >21 magnetic powers22 </Link>23 </MagneticHover>2425 <span>now.</span>26 </div>27 </div>28 );29};
What it pulls in
Other registry items
