Product Card
A product tile for grids and carousels, with pricing, rating, swatches, and stock state built in.
Ceramic Pour-Over Mug
$38.00
Stoneware, 340ml
Sale pricing is derived
There's no onSale flag: passing compareAtPrice is what produces the badge, the struck original, and the discounted price — and the saving is computed from the two numbers, so it can't contradict them.
-27%Ceramic Pour-Over Mug
$38.00$28.00
Colour options
Ceramic Pour-Over Mug
$38.00
Out of stock
Out of stockCeramic Pour-Over Mug
$38.00
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| image / imageAlt | string | Product photo and its alt text. | |
| name | string | Product name. | |
| description | string | Short supporting line. | |
| price | number | Raw number, formatted by the component. | |
| compareAtPrice | number | The was-price. Its presence switches the card to the sale treatment. | |
| rating / reviewCount | number | Star rating out of 5 and the number of reviews behind it. | |
| colors | ProductCardColor[] | Swatches: { id?, color, label, available? }. id falls back to label. | |
| onColorSelect | (id: string) => void | Fires with the selected swatch's id. | |
| inStock | boolean | False dims the card and blocks the add action. | |
| wishlisted | boolean | Fills the wishlist heart. |