Product Card
Product tile with badge, star rating, strikethrough price, an Add to cart toggle and a wishlist heart.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
ProductCardProps
Also accepts all props of Omit<React.ComponentProps<"div">, "title">
| Prop | Type | Default | Description |
|---|---|---|---|
| name* required | string | — | — |
| price* required | number | — | — |
| originalPrice | number | — | Original price, shown with a strikethrough |
| rating* required | number | — | 0-5, supports halves visually by rounding |
| reviews | number | — | — |
| badge | string | — | e.g. "New" or "-20%" |
| imageClassName | string | "from-amber-300 via-orange-400 to-rose-500" | Tailwind gradient utilities for the image placeholder |
| currency | string | "$" | — |
| onAddToCart | (added: boolean) => void | — | — |
| onWishlistChange | (wished: boolean) => void | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/product-card.json