Open-source shadcn/ui registry
The e-commerce blocks
shadcn doesn’t ship.
shadcn/ui gives you forty primitives and a few dashboard blocks. It has never shipped a buy box, a faceted filter panel, or an order summary — the three things every store rebuilds from scratch. ecomcn fills exactly that gap, and hands you the source.
Browse the catalogue MIT · zero config · source you own
10
blocks shipped
29
specified for v1
5
funnel stages
1
command to install any of them
Running, not screenshotted
Three shipped blocks, wired together
Quick-add is keyboard reachable. The promo code is ARCHIVE20 — anything else returns an inline error.
Summary
$105.00 from free shipping
- Subtotal (1 items)
- $195.00
- Shipping
- $18.00
- Estimated tax
- $15.60
Total$228.60
Tax and shipping are estimates until an address is entered.
The catalogue
29 blocks, five stages,
one purchase funnel.
Organised by the decision a buyer is making — not “cards, forms, navigation”, which is how generic kits are structured and why nobody can tell them apart.
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.
product-gridShippedResponsive grid with box-matched skeletons, a density switch and an empty state.
filter-panelShippedApplied chips, counts, a dual-handle range, swatches and toggles — state in the URL, layout in your hands via compound parts.
filter-sheetShippedThe same facets in a slide-over — staged, applied once, with a live “Show N” count.
load-moreShippedProgress rule, “Showing 24 of 312”, a Load more button and optional hybrid or infinite loading.
product-quick-viewShippedThe card’s image morphs into a dialog and back — a shared-element transition with Motion.
sort-toolbarShippedResult count, native sort select, density switch and a slot for the mobile filter trigger.
empty-resultsShippedNames the filters that emptied the grid and offers the one change that brings the most back.
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.
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.
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.
House style
Six rules that keep it from looking generated
A registry lives or dies on whether the screenshots look like something a person decided. Every block holds all six, without exception.
01
Radius 2px, not 12
Uniform pill-rounding is the loudest tell of a generated interface. --radius is 0.125rem; rules and edges do the work.
02
Rules over cards
Sections are separated by hairlines, not stacked shadow boxes. A page reads as one ruled object, the way a printed catalogue does.
03
One serif, one grotesque
Names, prices and section heads in a high-contrast serif. Everything functional in a neutral sans. Two faces, no third.
04
Asymmetry on purpose
1.05fr / 0.95fr splits, 7/5 grids, left-aligned empty states. Nothing is centred unless centring is the point.
05
One accent, used sparingly
A single vermilion carries sale states, the active step and the live tracking node. No gradient, anywhere.
06
Tabular numerals everywhere
Prices, counts, sizes, order numbers. A column of prices that doesn't align is the fastest way to look unfinished.
Install
Two commands, then it’s your code.
Register the namespace once, then add blocks by name. Step one is not optional: the CLI never adds a registry on its own, so a block that pulls another ecomcn block cannot resolve it until @ecomcn exists in your components.json. Nothing is installed at runtime — the CLI copies source into your repo.
$ npx shadcn@latest registry add @ecomcn=https://ecomcn.vercel.app/r/{name}.json$ npx shadcn@latest add @ecomcn/product-cardWhy a registry, not a package
An npm component library forces its API and its styling on you, and every customisation becomes a fight with the abstraction. A registry hands over source. For e-commerce — where every store needs a slightly different buy box, a different tax line, a different size grid — that is the only model that survives contact with a real store.
States included
Loading, empty, out-of-stock, undo — the states people forget.
Accessible by construction
Keyboard paths for hover affordances, no colour-only state.
Internationalised pricing
Intl.NumberFormat and currency props from day one.
Framework-neutral
No next/image, no next/link. Paste it into Vite and it compiles.