The catalogue
29 blocks, five stages,
one purchase funnel.
10 are installable today; the rest are specified and waiting. Every one maps to a decision a buyer makes — that is how you find the block for the problem you actually have.
Discover
Landing surfaces. Their only job is to make one thing look worth clicking.
announcement-barPlannedDismissible ticker for shipping thresholds, sale windows and drops.
hero-editorialPlannedAsymmetric split hero with an overlaid product caption.
category-railPlannedSnap-aligned category tiles with a numbered index and counts.
collection-gridPlannedMagazine grid — one dominant tile, two supporting.
lookbook-stripPlannedFull-bleed campaign image with product hotspots.
Browse
The listing page. Where most of a store's revenue is actually decided.
product-cardShippedBadges, compare-at pricing, colour swatches that swap the image, and a keyboard-reachable quick-add — one tag, or recomposed from its parts.
Read the docs
product-gridShippedResponsive grid with box-matched skeletons, a density switch and an empty state.
Read the docs
filter-panelShippedApplied chips, counts, a dual-handle range, swatches and toggles — state in the URL, layout in your hands via compound parts.
Read the docs
filter-sheetShippedThe same facets in a slide-over — staged, applied once, with a live “Show N” count.
Read the docs
load-moreShippedProgress rule, “Showing 24 of 312”, a Load more button and optional hybrid or infinite loading.
Read the docs
product-quick-viewShippedThe card’s image morphs into a dialog and back — a shared-element transition with Motion.
Read the docs
sort-toolbarShippedResult count, native sort select, density switch and a slot for the mobile filter trigger.
Read the docs
empty-resultsShippedNames the filters that emptied the grid and offers the one change that brings the most back.
Read the docs
Product
Every objection a buyer has gets answered here or nowhere.
product-galleryPlannedThumbnail rail, counter overlay, swipe on mobile.
price-tagShippedLocale-aware price with compare-at strike and a computed discount badge.
Read the docs
variant-swatchesPlannedColour swatches and a size grid with out-of-stock strike-through.
size-guide-dialogPlannedMeasurement table plus a fit note, opened from the size label.
product-buy-boxPlannedVariants, quantity, add-to-bag carrying the live total, delivery promise.
product-details-accordionPlannedMaterials, care, shipping and maker sections.
review-summaryPlannedStar histogram that filters the list, fit slider, verified badges.
related-productsPlannedSnap-scrolling rail built from the same product card.
Cart & checkout
Pure friction removal. Every element either reduces doubt or gets cut.
cart-line-itemPlannedQuantity stepper, line total, save-for-later, remove-with-undo.
cart-sheetPlannedSlide-over mini cart with a sticky subtotal footer.
order-summaryShippedFree-shipping meter, promo code, itemised totals and a testable totals hook.
Read the docs
checkout-stepperPlannedFour-step rail with done / active / pending states.
payment-selectorPlannedRadio cards for card / wallet / pay-in-3 that expand to their fields.
address-formPlannedCountry-aware fields with correct autocomplete tokens.
Post-purchase
The part most component kits skip — and the part that drives repeat orders.
order-confirmationPlannedThe receipt people screenshot — printable, permalinked.
order-trackingPlannedShipment timeline with a live node and carrier status.