Browse / composed example
Listing page
A collection page built from ecomcn alone: toolbar, URL-driven filters on desktop, a staged sheet on mobile, composed cards with a quick-view morph, load more, and a useful empty state.
$ npx shadcn@latest registry add @ecomcn=https://ecomcn.vercel.app/r/{name}.json$ npx shadcn@latest add @ecomcn/sort-toolbar @ecomcn/filter-sheet @ecomcn/product-grid @ecomcn/product-quick-view @ecomcn/load-more @ecomcn/empty-resultsWhat it is made of
sort-toolbarResult count, native sort select, density switch and a slot for the mobile filter trigger.
filter-panelApplied chips, counts, a dual-handle range, swatches and toggles — state in the URL, layout in your hands via compound parts.
filter-sheetThe same facets in a slide-over — staged, applied once, with a live “Show N” count.
product-gridResponsive grid with box-matched skeletons, a density switch and an empty state.
product-cardBadges, compare-at pricing, colour swatches that swap the image, and a keyboard-reachable quick-add — one tag, or recomposed from its parts.
product-quick-viewThe card’s image morphs into a dialog and back — a shared-element transition with Motion.
load-moreProgress rule, “Showing 24 of 312”, a Load more button and optional hybrid or infinite loading.
empty-resultsNames the filters that emptied the grid and offers the one change that brings the most back.
price-tagLocale-aware price with compare-at strike and a computed discount badge.
Try it at the mobile width: the sidebar panel gives way to the filter sheet, which stages changes and applies them once. Every filter — and how many pages are loaded — is in the preview frame's URL, and the browser's Back button undoes filters one at a time. Open a quick view to see the card image morph into the dialog.