Components
Loading preview...
When a user hovers over a link, a preview of the link's destination appears.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/hover-link-previewimport { 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}