---
name: "@ecomcn"
slug: "ecomcn"
description: "E-commerce blocks for shadcn/ui, organised by the purchase funnel — product cards and grids, URL-driven filters, sort, load more, quick view, empty states and the order summary."
category: "Forms"
tags: ["accessibility", "blocks", "cards", "e-commerce", "editor", "forms", "media", "navigation", "onboarding", "overlays", "payments", "theming"]
framework: "react"
license: "MIT"
author: "its-Inbarajan"
website: "https://ecomcn.vercel.app"
github: "https://github.com/its-Inbarajan/ecomcn"
registry: "https://ecomcn.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 5
component_count: 31
generated_at: "2026-10-27T06:34:08.542Z"
---

# @ecomcn

E-commerce blocks for shadcn/ui, organised by the purchase funnel — product cards and grids, URL-driven filters, sort, load more, quick view, empty states and the order summary.

## Links

- Website: https://ecomcn.vercel.app
- GitHub: https://github.com/its-Inbarajan/ecomcn
- Registry JSON: https://ecomcn.vercel.app/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/ecomcn
- This file: https://sh4dcn.netlify.app/md/ecomcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ecomcn.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://ecomcn.vercel.app/r/registry.json
bunx shadcn@latest add https://ecomcn.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/its-Inbarajan/ecomcn.git
# fetch the raw registry index
curl -s https://ecomcn.vercel.app/r/registry.json
```

## Components (31)

| name | type | description | install |
| --- | --- | --- | --- |
| announcement-bar | registry:component | The thin inverted ink bar above everything — free-shipping thresholds, sale windows, drops — with a brand dot between messages. Static, or a marquee at 26s a l… | `npx shadcn@latest add https://ecomcn.vercel.app/r/announcement-bar.json` |
| hero-editorial | registry:block | An asymmetric split hero: an oversized serif headline on the left, a campaign image on the right with a product caption sitting on it. 1.05fr / 0.95fr, not 50/… | `npx shadcn@latest add https://ecomcn.vercel.app/r/hero-editorial.json` |
| category-rail | registry:block | Numbered category tiles with a photo and an item count, snapping along your shadcn Carousel. Tiles sit 1px apart over a track in your border colour, so the rai… | `npx shadcn@latest add https://ecomcn.vercel.app/r/category-rail.json` |
| collection-grid | registry:block | Three collections as a magazine spread: one dominant tile spanning both rows on a 7/5 split, two supporting it, the type scaling with the tile. On a phone the … | `npx shadcn@latest add https://ecomcn.vercel.app/r/collection-grid.json` |
| lookbook-strip | registry:block | A campaign photo you can shop: numbered hairline-ring hotspots, placed by percentage with their own positions for a mobile crop, each opening its product on yo… | `npx shadcn@latest add https://ecomcn.vercel.app/r/lookbook-strip.json` |
| price-tag | registry:ui | Locale-aware price with compare-at strike, computed discount badge and a screen-reader announcement. No dependencies. | `npx shadcn@latest add https://ecomcn.vercel.app/r/price-tag.json` |
| product-card | registry:block | Catalogue tile with badges, compare-at pricing, colour swatches that swap the image, rating, a keyboard-reachable quick-add, and a wishlist heart under the bad… | `npx shadcn@latest add https://ecomcn.vercel.app/r/product-card.json` |
| product-grid | registry:block | Responsive catalogue grid with box-matched loading skeletons, appended skeletons while more results load, a density switch, a renderCard slot for composed card… | `npx shadcn@latest add https://ecomcn.vercel.app/r/product-grid.json` |
| sort-toolbar | registry:component | The rule above a listing: a result count announced to screen readers once results settle, a native sort select, a density switch and a slot for the mobile filt… | `npx shadcn@latest add https://ecomcn.vercel.app/r/sort-toolbar.json` |
| empty-results | registry:component | A no-match state that names the filters that emptied the grid, offers the single change that brings the most back, and lets shoppers remove filters one at a ti… | `npx shadcn@latest add https://ecomcn.vercel.app/r/empty-results.json` |
| filter-panel | registry:block | Faceted filters with state that lives in the URL: applied-filter chips, checkbox lists with counts, a dual-handle range with typed inputs, colour swatches and … | `npx shadcn@latest add https://ecomcn.vercel.app/r/filter-panel.json` |
| filter-sheet | registry:block | The filter panel in a slide-over for small screens. Changes are staged and applied once — on Show or on close — with a live result count on the button and focu… | `npx shadcn@latest add https://ecomcn.vercel.app/r/filter-sheet.json` |
| load-more | registry:component | Progressive loading for a product list: a progress rule and “Showing 24 of 312” count, a Load more button, optional hybrid or infinite auto-loading, focus move… | `npx shadcn@latest add https://ecomcn.vercel.app/r/load-more.json` |
| product-quick-view | registry:block | Quick view with a shared-element morph: the card image grows into the dialog and shrinks back on close. Motion's layoutId drives the morph, a native <dialog> d… | `npx shadcn@latest add https://ecomcn.vercel.app/r/product-quick-view.json` |
| product-details-accordion | registry:component | Materials, care, shipping and maker sections on your shadcn Accordion, first section open. Each closed row carries a one-line summary, so shoppers get the answ… | `npx shadcn@latest add https://ecomcn.vercel.app/r/product-details-accordion.json` |
| size-guide-dialog | registry:component | A measurement table in your shadcn Dialog that morphs out of a quiet link beside the size label, and back into it (Motion; a fade under reduced motion). Centim… | `npx shadcn@latest add https://ecomcn.vercel.app/r/size-guide-dialog.json` |
| variant-swatches | registry:block | Colour swatches and a ruled size grid that work out stock from your variants: with a colour picked, sizes it has none of are struck through with a diagonal rul… | `npx shadcn@latest add https://ecomcn.vercel.app/r/variant-swatches.json` |
| product-buy-box | registry:block | The buy box: brand, name, a rating that links to the reviews, the price (the variant's own when it has one), stock-aware variant swatches, a quantity stepper, … | `npx shadcn@latest add https://ecomcn.vercel.app/r/product-buy-box.json` |
| review-summary | registry:block | The reviews section: the average set large, a star histogram whose rows are buttons that filter the list (and read out as "5 stars, 226 reviews, 72%"), a fit s… | `npx shadcn@latest add https://ecomcn.vercel.app/r/review-summary.json` |
| related-products | registry:block | A "pairs well with" rail of the exact product card on your shadcn Carousel, with the Carousel's own previous / next buttons in the header and a progress rule u… | `npx shadcn@latest add https://ecomcn.vercel.app/r/related-products.json` |
| product-gallery | registry:block | The product's photos: a main image on your shadcn Carousel with a counter, and thumbnails beside it on a desktop and under it on a phone (scrolling without a s… | `npx shadcn@latest add https://ecomcn.vercel.app/r/product-gallery.json` |
| cart-line-item | registry:component | One line in a bag: thumbnail, name and variant, a quantity stepper, a right-aligned tabular line total, and save-for-later / remove. Removing never asks — the … | `npx shadcn@latest add https://ecomcn.vercel.app/r/cart-line-item.json` |
| cart-sheet | registry:block | The mini cart on your shadcn Sheet: a bag button with a count that turns over, and a sheet that grows out of it as a circle and folds back into it (Motion; a f… | `npx shadcn@latest add https://ecomcn.vercel.app/r/cart-sheet.json` |
| order-summary | registry:block | Free-shipping progress, promo code field with applied state, itemised totals and the checkout CTA. Totals logic lives in a separate hook you can test. | `npx shadcn@latest add https://ecomcn.vercel.app/r/order-summary.json` |
| checkout-stepper | registry:component | Where the shopper is in checkout: a rail of equal ruled cells, edge to edge. Done steps carry a check and are buttons back to them; the current step is aria-cu… | `npx shadcn@latest add https://ecomcn.vercel.app/r/checkout-stepper.json` |
| delivery-options | registry:block | How it gets there: one ruled list of delivery methods, each with its arrival dates and price. Arrival is a date range from business days and a dispatch cut-off… | `npx shadcn@latest add https://ecomcn.vercel.app/r/delivery-options.json` |
| address-form | registry:block | A shipping or billing address whose fields follow the country: a state and ZIP code for the US, a town and postcode for the UK, family name first for Japan, a … | `npx shadcn@latest add https://ecomcn.vercel.app/r/address-form.json` |
| payment-selector | registry:block | How the shopper pays: one ruled list of methods (card, wallet, pay in instalments, bank) where the chosen one opens onto your payment provider's own fields. It… | `npx shadcn@latest add https://ecomcn.vercel.app/r/payment-selector.json` |
| order-confirmation | registry:block | The page after Pay: the receipt people screenshot, print and come back to. A thank-you set large in your serif on a grained band, with a check that draws itsel… | `npx shadcn@latest add https://ecomcn.vercel.app/r/order-confirmation.json` |
| order-tracking | registry:block | Where the parcel is: a status chip, the arrival window, a vertical timeline of milestones and the carrier's updates. Carrier webhooks arrive out of order and t… | `npx shadcn@latest add https://ecomcn.vercel.app/r/order-tracking.json` |
| theme-editorial | registry:theme | The ecomcn house style — warm paper, near-black ink, a single vermilion signal colour, and a 2px radius so nothing reads as a rounded card. Ships the complete … | `npx shadcn@latest add https://ecomcn.vercel.app/r/theme-editorial.json` |

## For AI agents

```text
You are adding components from @ecomcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/ecomcn.md) for the component list.
2. Fetch the machine-readable index: https://ecomcn.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: ecomcn).
```