Preview Hover Card
An inline link that reveals a thumbnail hover card with image, tag, title, and description on pointer enter.
PreviewHoverCard wraps a bold inline link with a Radix HoverCard. When hovered or focused the card slides in showing a cropped thumbnail, a monospaced tag badge, an uppercase title, and a three-line clamped description. A yellow highlight sweeps across the link text as the card opens.
It is designed for use inside body copy — drop it around a project name, company mention, or any reference that benefits from a rich visual preview without leaving the page.
Installation
npx shadcn@latest add @adv/preview-hover-cardUsage
import { PreviewHoverCard } from '@/components/ui/PreviewHoverCard';
<PreviewHoverCard
thumbnail="/images/project-thumb.jpg"
title="Adventureland"
description="A creative portfolio built on Next.js with animated transitions."
tag="Case study"
link="/work/adventureland"
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
thumbnail | string | — | URL of the preview image shown at the top of the card. |
title | string | — | Text rendered as both the clickable link label and the card heading. |
description | string | — | Supporting copy shown below the title, clamped to three lines. |
tag | string | — | Short label displayed in a monospaced badge above the title. |
link | string | — | href passed to the Next.js <Link> wrapping the trigger text. |