Product Compare
Side-by-side comparison of two or three products with drawn thumbs, a sticky product header, highlighted differences and best values, an only-differences toggle and add to cart per column.
Preview
Compare kettles
| Spec | Pour-over gooseneck$72.00 | Round stovetop$48.00 | Tall electric$59.00 |
|---|---|---|---|
| Capacity(differs) | 1 L | 1.7 LBest | 1.5 L |
| Boil time(differs) | 4.5 min | 6 min | 3.8 minBest |
| Temperature control(differs) | Yes | No | Yes |
| Keep warm(differs) | Yes | No | No |
| Body(differs) | Steel | Enamel | Steel |
| Lid | Hinged | Hinged | Hinged |
| Dishwasher safe | No | No | No |
| Power(differs) | 230 V | Stovetop | 230 V |
| Weight(differs) | 980 gBest | 1,250 g | 1,100 g |
| Warranty | 2 years | 2 years | 2 years |
Showing all 10 rows
Scroll the table: the product row stays on top
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| products | { id; name; price; thumb?; specs: Record<string, value> }[] | — | Two or three products, one column each. |
| rows | { key; label; unit?; better?: "higher" | "lower" }[] | — | Spec rows; better marks the best numeric value. |
| onAdd | (product) => void | — | Add to cart button per column. |
| defaultOnlyDifferences | boolean | false | Start showing only rows that differ. |
| maxHeight | number | string | 460 | Scroll area height; the product header sticks inside it. |
| title / currency / locale | string | "Compare" / "USD" / "en-US" | Heading and money formatting. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.