---
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: "Editor (rich text/code)"
tags: ["accessibility", "blocks", "cards", "e-commerce", "editor", "media", "navigation", "overlays", "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: 4
component_count: 21
generated_at: "2026-10-10T06:32:55.998Z"
---

# @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.vercel.app/registry/ecomcn
- This file: https://sh4dcn.vercel.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 (21)

| name | type | description | install |
| --- | --- | --- | --- |
| 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` |
| 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.vercel.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.vercel.app/json (library slug: ecomcn).
```