Shadcn.io is not affiliated with official shadcn/ui
Product Card Sale
Product card with sale pricing showing original and discounted price for React ecommerce
Highlight discounted products on your Next.js ecommerce store with this sale product card component. Features sale badge, original price with strikethrough, discounted price, savings percentage, and urgency messaging. Built with shadcn/ui Card, Button, and Badge components using Tailwind CSS. The promotional design drives conversions during sales—perfect for Shopify headless flash sales, clearance sections, Black Friday campaigns, or any React app running promotions. Accessible and SEO-friendly pricing markup.
Installation
Related Components
React Product Card Simple
Standard product card
React Product Card Horizontal
Side-by-side layout
React Product Card Compact
Minimal product tile
React Product Card Variants
Color and size options
React Product Card Grid
Product grid layout
React Storefront Block Hero
Featured product showcase
FAQ
Was this page helpful?
Sign in to leave feedback.