Product / composed example
Product page
A product page built from ecomcn alone: a gallery that follows the colour you pick, the buy box with stock-aware swatches and a size guide, details, reviews that filter, and a rail of related products.
$ npx shadcn@latest add @ecomcn/product-gallery @ecomcn/product-buy-box @ecomcn/size-guide-dialog @ecomcn/product-details-accordion @ecomcn/review-summary @ecomcn/related-productsOlder 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}.jsonWhat it is made of
product-galleryMain photo with a counter and thumbnails; swipe on a phone, hover-zoom on a desktop, full screen from the photo itself.
product-buy-boxVariants, quantity, an add-to-bag that carries the live total and rolls back if it fails, and a delivery date range.
variant-swatchesColour 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-dialogMeasurement table in cm or inches with the shopper's size marked, opened from a quiet link beside the size label.
price-tagLocale-aware price with compare-at strike and a computed discount badge.
product-details-accordionMaterials, care, shipping and maker sections on your shadcn Accordion — each closed row carries its one-line answer.
review-summaryThe average set large, a star histogram whose rows filter the list, a fit scale in words, and verified badges.
related-productsA snap-scrolling rail of the same product card, mounted only when it nears the viewport.
product-cardBadges, compare-at pricing, colour swatches that swap the image, and a keyboard-reachable quick-add — one tag, or recomposed from its parts.
Pick Black: the gallery swaps to its photos, the price drops to its own, and most sizes strike through. Press add before choosing a size and the button asks. Hover the photo to zoom; press it to open full screen. The rating under the name jumps to the reviews, whose histogram filters the list.