Product grid

List host for product cards with category chips, sort, search and pagination.

Catalog

Pack defaults

With content

In context

Source

import { ProductGrid } from "demo-webshop/components";

const props = {
  "toolbar": true,
  "chips": true,
  "pageSize": 8,
  "defaultSort": "featured",
  "emptyText": "No products match."
};
<ProductGrid {...props} />

Live CSS

Injected into the previews above. Product grid

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */