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.
Link Preview
A React hover card displaying link preview with article title, description, and external domain on underlined anchor trigger using shadcn/ui HoverCard
Profile with Badge
A React hover card showing user profile with avatar in trigger badge for status and join date information built with shadcn/ui components