Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
File links need context—this React hover card displays PDF document details with colored icon background, size, type, description, and modification date on file name hover. Built with shadcn/ui HoverCard and Radix UI primitives featuring w-80 content, space-y-3 sections, h-10 w-10 rounded red-100 icon container, underlined anchor trigger, and text-xs metadata. The comprehensive file preview with visual hierarchy creates informed downloads—perfect for document libraries, attachment lists, file managers, or anywhere users need file details before downloading showing what they're getting and when it was updated.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Link Preview
Article link with title and description
Image Preview
Image file with actual thumbnail
Info with Badge
Badge with circular icon background
File Upload
File selection and upload component
Product Preview
Product with image and pricing
List Item
File list item with icon
Questions you might have
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
React Hover Card - Image Preview
A React hover card displaying actual image thumbnail with filename, dimensions, size, and format on button trigger using shadcn/ui HoverCard