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.
30
blocks shipped
30
in the catalogue
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.
New
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
30 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-barShippedA dismissible ink bar for shipping thresholds, sale windows and drops — static, or a marquee you can pause.
hero-editorialShippedAn asymmetric split hero: an oversized serif headline, a campaign image, and a product caption sitting on it.
category-railShippedNumbered category tiles with a photo and a count, snapping along your shadcn Carousel.
collection-gridShippedThree collections as a magazine spread: one dominant tile, two supporting it.
lookbook-stripShippedA campaign photo with numbered hotspots that open the products in it — and the same products listed under it.
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-galleryShippedMain photo with a counter and thumbnails; swipe on a phone, hover-zoom on a desktop, full screen from the photo itself.
price-tagShippedLocale-aware price with compare-at strike and a computed discount badge.
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.
size-guide-dialogShippedMeasurement table in cm or inches with the shopper's size marked, opened from a quiet link beside the size label.
product-buy-boxShippedVariants, quantity, an add-to-bag that carries the live total and rolls back if it fails, and a delivery date range.
product-details-accordionShippedMaterials, care, shipping and maker sections on your shadcn Accordion — each closed row carries its one-line answer.
review-summaryShippedThe average set large, a star histogram whose rows filter the list, a fit scale in words, and verified badges.
related-productsShippedA snap-scrolling rail of the same product card, mounted only when it nears the viewport.
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.
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.
order-summaryShippedFree-shipping meter, promo code, itemised totals and a testable totals hook.
checkout-stepperShippedA rail of equal ruled cells with done, current and pending steps; done steps go back, pending ones don't.
delivery-optionsShippedDelivery methods as one ruled list, each with its arrival dates on the shopper’s clock and a right-aligned price.
payment-selectorShippedCard, wallet, pay-in-3 and bank as one ruled list; the chosen method opens onto your payment provider’s own fields.
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.
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.
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.
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
One command, then it’s your code.
ecomcn is listed in the shadcn Registry Directory, so the CLI knows @ecomcn by name. The first add writes it into your components.json, and a block that pulls another ecomcn block resolves it on its own. Nothing is installed at runtime — the CLI copies source into your repo.
$ npx shadcn@latest add @ecomcn/product-cardOlder shadcn CLI, or want the registry pinned?
Register the namespace yourself, once per project, then run the same add command. {name} is literal — the CLI fills it in.
$ npx shadcn@latest registry add @ecomcn=https://ecomcn.vercel.app/r/{name}.jsonWhy 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.