Shadcn.io is not affiliated with official shadcn/ui
Product Preview
A React hover card displaying product preview with Package icon, pricing with original and sale prices, description, rating, and stock status
Product links need quick details—this React hover card shows product thumbnail placeholder, name, discounted pricing with line-through original price, description, star rating with review count, and In Stock status on anchor hover. Built with shadcn/ui HoverCard and Radix UI primitives featuring w-80 content, flex gap-3 layout, h-16 w-16 rounded-md icon container, font-bold text-lg pricing, text-sm line-through original price, and color-coded stock status. The comprehensive product preview with pricing hierarchy creates informed purchases—perfect for e-commerce, marketplaces, product lists, or anywhere users browse products needing price, availability, and rating before clicking showing complete buying decision context.
Product Preview preview
Installation
Related Components
Image Preview
Preview with actual image thumbnail
Link Preview
Link with title and description
Document Preview
File with icon and metadata
Standard Card
Product card with image and details
Standard Badge
Stock status badge
Info with Badge
Badge trigger with icon
FAQ
Was this page helpful?
Sign in to leave feedback.
Event Preview
A React hover card showing event details with Calendar, Clock, Users icons, Upcoming badge, and structured date, time, and attendee information
Simple Profile Hover Card
A React hover card showing user profile with avatar name and bio on username link hover built with shadcn/ui HoverCard and Avatar components