Hover Link Preview

Cards 152

About

When a user hovers over a link, a preview of the link's destination appears.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hover Link Preview to your project and fits it to your theme.

Code

How Hover Link Preview is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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}