Product Card
Show a second product photo on hover, with favorite and quick-add controls.
- Dependencies
- No extra packages
- Size
- 210 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/product-card.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/product-card.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the product-card.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| product | Product | — | { name, href, subcategory?, size?, descriptor?, price: number | null, image, imageAlt?, photo?, surface? }; image is the cutout, photo the hover close-up. |
| currency / locale | string | "USD" / "en-US" | Passed to Intl.NumberFormat for the price. |
| priceFallback | string | "Pricing at launch" | Shown when price is null. |
| addLabel / addedLabel | string | "Add to bag" / "Added to bag" | Quick-add pill labels; the added label shows for 1.8s. |
| onAdd | (product) => void | — | Called when the quick-add pill is pressed. |
| wishlisted / onWishlistChange | boolean / (next) => void | — | Control the heart, or leave it uncontrolled. Saved fills the disc with the ink colour. |
| surface / ink / paper / muted | string | "#f1eee6" / "#33251c" / "#f7f3e9" / "#685c50" | Image box, text, pill and secondary text colours. |