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.
Warning Info
A React hover card within orange warning banner showing limited time offer details with AlertCircle icon and underlined Details trigger
Event Preview
A React hover card showing event details with Calendar, Clock, Users icons, Upcoming badge, and structured date, time, and attendee information