Shadcn.io is not affiliated with official shadcn/ui
Document Preview
A React hover card showing document preview with FileText icon background, file details, description, and last modified date on anchor trigger
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.
Document Preview preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Link Preview
A React hover card displaying link preview with article title, description, and external domain on underlined anchor trigger using shadcn/ui HoverCard
Image Preview
A React hover card displaying actual image thumbnail with filename, dimensions, size, and format on button trigger using shadcn/ui HoverCard