# Hover Card Preview 3 - Image preview

> HoverCard showing thumbnail preview for linked or attached image.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/hover-card-hover-card-preview-3).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/hover-card-hover-card-preview-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/hover-card-hover-card-preview-3-light-2102e958d1aedd70.png
- Registry item: https://shadcnblocks.com/r/hover-card-hover-card-preview-3.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/hover-card-hover-card-preview-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `hover-card`

## Files

### `example/hover-card/hover-card-preview-3.tsx`

```tsx
"use client";

import { ImageIcon } from "lucide-react";

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

export const title = "Image Preview";

const Example = () => (
  <HoverCard>
    <HoverCardTrigger asChild>
      <button className="flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-accent">
        <ImageIcon className="h-4 w-4" />
        <span>hero-banner.jpg</span>
      </button>
    </HoverCardTrigger>
    <HoverCardContent className="w-80">
      <div className="space-y-3">
        <div className="aspect-video overflow-hidden rounded-md bg-muted">
          <img
            alt="Preview"
            className="h-full w-full object-cover"
            src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=225&fit=crop"
          />
        </div>
        <div className="space-y-1">
          <h4 className="text-sm font-semibold">hero-banner.jpg</h4>
          <p className="text-xs text-muted-foreground">
            1920 × 1080 · 1.2 MB · JPEG
          </p>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>
);

export default Example;
```