Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Hover Card - Link Preview
A React hover card displaying link preview with article title, description, and external domain on underlined anchor trigger using shadcn/ui HoverCard
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Link previews reveal content before navigation—this React hover card shows article title, description, and source domain on anchor hover using asChild pattern. Built with shadcn/ui HoverCard and Radix UI primitives featuring w-80 content width, space-y-2 vertical spacing, underline underline-offset-4 styling, ExternalLink icon with h-3 w-3 sizing, and text-muted-foreground text-xs domain display. The inline preview with formatted metadata creates informed navigation—perfect for blog links, resource references, documentation citations, or anywhere helping users decide whether to follow links without leaving current page.
Check out this article for more information.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Document Preview
File preview with metadata and icon
Simple Info Tooltip
Basic hover card with icon trigger
Product Preview
Product details with pricing
Standard Popover
Click-triggered content preview
Standard Tooltip
Simple link title tooltip
Event Preview
Event details with date and time
Questions you might have
React Hover Card - Technical Info
A React hover card with Code icon trigger displaying API endpoint details with formatted method, URL, and auth using code tags and w-80 width
React Hover Card - Document Preview
A React hover card showing document preview with FileText icon background, file details, description, and last modified date on anchor trigger