Hover Link Preview

import { HoverLinkPreview } from "@/components/ui/hover-link-preview"

 
const Demo: React.FC = () => (
  <div className="flex flex-col gap-12 items-center text-center">
    <div className="p-10 flex gap-1 font-medium text-xl">
      Hey, have you tried
      <HoverLinkPreview
        href="https://21st/dev/magic"
        previewImage="https://21st.dev/magic-agent-og-image.png"
        imageAlt="Example preview"
      >
        Magic MCP?
      </HoverLinkPreview>
      It's amazing!
    </div>
 
    <p>(Try hovering link)</p>
  </div>
);

export {Demo}