StickyAddToCart

Mobile-only bottom bar that watches the in-page Add button via IntersectionObserver.

components/sticky-add-to-cart.tsxPeer deps: lucide-react

Live preview

The sticky bar mounts at the bottom of the viewport. Scroll on a narrow window to see it appear. (It's hidden above the `md` breakpoint.)

Usage

import { StickyAddToCart } from "@/components/sticky-add-to-cart";

<button id="primary-add-to-cart" onClick={add}>Add to cart</button>

<StickyAddToCart
  name={product.name}
  priceCents={product.priceCents}
  compareAtPriceCents={product.compareAtPriceCents}
  onAddToCart={add}
/>