−21%
Tide stoneware mug
350 ml · Stone
$22.00was $28.00
In cart
Product Card
Product card with drawn SVG art, discount and rating, colour swatches, a bursting wishlist heart and Add to cart that morphs into a quantity stepper.
Preview
New
Loop runner
Knit upper · Harbor
$118.00
Sold out
Hinge desk lamp
Powder-coated steel
$89.00
2 items in cart
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name / subtitle | string | — | Product name (names the card) and a short line under it. |
| price / compareAt | number | — | Price and original price; a discount chip shows when compareAt is higher. |
| currency / locale | string | "USD" / "en-US" | Intl currency formatting. |
| rating | { value: number; count: number } | — | Average out of 5 (partial stars) and review count. |
| media | ReactNode | (color) => ReactNode | — | Drawn product art; a function receives the selected colour. |
| colors | { value; label; swatch }[] | — | Swatches as a radio group; swatch is any CSS colour, ideally a token. |
| color / defaultColor / onColorChange | string | first colour | Selected swatch, controlled or not. |
| wishlisted / onWishlistChange | boolean | false | Heart toggle state; turning on plays a small ember burst. |
| quantity / defaultQuantity / onQuantityChange | number | 0 | Units in cart; 0 shows Add to cart, more shows the stepper. |
| maxQuantity | number | 9 | Stepper maximum. |
| badge | string | — | Chip on the media, e.g. New. |
| soldOut | boolean | false | Greys the art and swaps the CTA for a disabled Sold out. |
| href | string | — | Makes the name a link to the product page. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.