components/
Composable primitives, not a monolithic ProductCard.
Hydrogen's real value is the primitives, not a pre-built card — so that's
what ships. A ProductCard/ProductGrid can still be composed from
Money+Img+Pagination (see prebit-template-store's own pages for a
working example), but that composition is yours to build, not
@prebit/boron's headline export.
<Money amount currencyCode />
Formatting primitive. No "use client" — safe in a Server Component.
<Money amount={product.price} /> {/* defaults to INR/en-IN */}<Img src alt />
An abstraction built on top of next/image, not a replacement for it
— and generic across every Prebit media object (product photos, collection
images, brand/store logos, hero banners), not product-specific.
Uses the real upload pipeline, not a guess
Every Prebit media URL is already the "primary" (1800w) rendition of a
real 3-size upload pipeline — siblings live at ${base}-400.${ext} and
${base}-900.${ext}. <Img /> renders a real next/image underneath
with a custom loader that snaps to the nearest of the three fixed
renditions, so you never ask the origin to re-resize what's already been
resized at upload time. You keep everything next/image already does
well — lazy loading, width/height-based CLS prevention, priority
support — without ever touching next/image directly.
<Img src={product.imageUrl} alt={product.name} width={600} height={600} priority /><Product product={...}>
A Context Provider — pass it server-fetched product data (fetch on the
server via getProduct(), hand the result to this small client boundary).
Exposes the current product + selected variant to children.
<Product product={product}>
<VariantSelector />
</Product><VariantSelector />
Must be a descendant of <Product>. Drives selection via the ?variant=<id>
URL search param rather than local-only state — shareable/bookmarkable,
matches Hydrogen's own approach.
<Cart />
Line-item display, wired to useCart(). Requires a <CartProvider>
ancestor.
<Pagination basePath currentPage hasMore />
next/link-based — works without JS, no "use client" needed.
<OptimisticCart cart>{({ cart, pending, add }) => ...}</OptimisticCart>
Cart UI built on React's useOptimistic, paired with
actions/'s addToCartAction for instant feedback
before the server round-trip resolves. A render-prop component — you own
the "real" cart source (e.g. useCart()'s state); this component only
bridges the visible gap between "user clicked add" and "the server
confirmed it."