About
A hover-triggered card that shows a file thumbnail, image preview, and quick download/full-size actions when hovering a file chip or attachment name.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hover Card Image Preview to your project and fits it to your theme.
Code
How Hover Card Image Preview is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import HoverCardImagePreview from "@/components/ui/hover-card-image-preview";
export default function HoverCardImagePreviewDemo() {
return (
<div className="flex h-screen w-full items-center justify-center bg-background">
<HoverCardImagePreview />
</div>
);
}
















