The catalogue
30 blocks, five stages,
one purchase funnel.
30 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-barShippedA dismissible ink bar for shipping thresholds, sale windows and drops — static, or a marquee you can pause.
Read the docs
hero-editorialShippedAn asymmetric split hero: an oversized serif headline, a campaign image, and a product caption sitting on it.
Read the docs
category-railShippedNumbered category tiles with a photo and a count, snapping along your shadcn Carousel.
Read the docs
collection-gridShippedThree collections as a magazine spread: one dominant tile, two supporting it.
Read the docs
lookbook-stripShippedA campaign photo with numbered hotspots that open the products in it — and the same products listed under it.
Read the docs
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-galleryShippedMain photo with a counter and thumbnails; swipe on a phone, hover-zoom on a desktop, full screen from the photo itself.
Read the docs
price-tagShippedLocale-aware price with compare-at strike and a computed discount badge.
Read the docs
variant-swatchesShippedColour swatches and a ruled size grid that work out stock from your variants — sold-out options struck through, still choosable, and a line that says why.
Read the docs
size-guide-dialogShippedMeasurement table in cm or inches with the shopper's size marked, opened from a quiet link beside the size label.
Read the docs
product-buy-boxShippedVariants, quantity, an add-to-bag that carries the live total and rolls back if it fails, and a delivery date range.
Read the docs
product-details-accordionShippedMaterials, care, shipping and maker sections on your shadcn Accordion — each closed row carries its one-line answer.
Read the docs
review-summaryShippedThe average set large, a star histogram whose rows filter the list, a fit scale in words, and verified badges.
Read the docs
related-productsShippedA snap-scrolling rail of the same product card, mounted only when it nears the viewport.
Read the docs
Cart & checkout
Pure friction removal. Every element either reduces doubt or gets cut.
cart-line-itemShippedQuantity stepper, a ledger-aligned line total, save-for-later, and remove with undo instead of a confirm dialog.
Read the docs
cart-sheetShippedMini cart on your shadcn Sheet: it grows out of the bag button, with the lines as the only scroller and the subtotal held at the bottom.
Read the docs
order-summaryShippedFree-shipping meter, promo code, itemised totals and a testable totals hook.
Read the docs
checkout-stepperShippedA rail of equal ruled cells with done, current and pending steps; done steps go back, pending ones don't.
Read the docs
delivery-optionsShippedDelivery methods as one ruled list, each with its arrival dates on the shopper’s clock and a right-aligned price.
Read the docs
payment-selectorShippedCard, wallet, pay-in-3 and bank as one ruled list; the chosen method opens onto your payment provider’s own fields.
Read the docs
address-formShippedCountry-aware address fields with searchable country and region, correct autofill tokens, an address-lookup slot and a validator your server can run too.
Read the docs
Post-purchase
The part most component kits skip — and the part that drives repeat orders.
order-confirmationShippedThe receipt people screenshot — a thank-you on a grained band, the four facts above the fold, printable, with a permalink.
Read the docs
order-trackingShippedA shipment timeline with a live node, a carrier status chip and the update log — in event order, whatever order the webhooks arrive in.
Read the docs