Mini Cart
Header cart button with a bumping count badge that opens a compact popover on hover or click with recent items, a rolling subtotal and checkout; the panel is exported for inline use.
Preview
Kettle & Kiln
Empty
Your cart
0 items
Your cart is empty
Add something and it shows up here.
Popover contents, shown inline
Your cart
4 items
- Tide stoneware mug1 × $22.00 · Ember$22.00
- Cedar & fig candle1 × $19.50$19.50
- Morning roast2 × $16.00 · 250 g$32.00
Subtotal
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id; name; variant?; price; quantity; thumb? }[] | — | Cart lines, newest last; the badge count and subtotal come from them. |
| limit | number | 3 | Recent lines shown before + n more. |
| open / defaultOpen / onOpenChange | boolean | false | Popover open state, controlled or not. |
| openOnHover | boolean | true | Open on hover for fine pointers; click always toggles. |
| onCheckout / onViewCart | () => void | — | Popover actions; the popover closes after. |
| MiniCartPanel | { items; limit?; onCheckout?; onViewCart? } | — | The popover contents as their own part, for inline use. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.