All packages
npm Packages

@cognitiondesk/storefrontv0.2.2

Presentational building blocks for a public product catalog — header, grid, cards, gallery. No fetching, no backend calls.

Install

Shell
npm install @cognitiondesk/storefront

Peer dependencies: react ≥17, react-dom ≥17

Quickstart

Run 2026-09-25 in plain Node, no backend needed for this call.

JavaScript
import { StorefrontHeader, ItemGrid, formatPrice } from '@cognitiondesk/storefront';

// Presentational: props in, callbacks out — you bring the items (fetch,
// getStaticProps, whatever you use), the component never calls a backend.
export function Store({ items, categories }) {
  return (
    <>
      <StorefrontHeader storeName="Acme Bikes" />
      <ItemGrid
        items={items}
        categories={categories}
        itemHref={(item) => `/store/${item.id}`}
        formatPrice={formatPrice}
        labels={{
          searchPlaceholder: 'Search…',
          allCategories: 'All',
          inStock: 'In stock',
          outOfStock: 'Out of stock',
          noItems: 'No items yet',
          noResults: 'No results',
        }}
      />
    </>
  );
}

API

StorefrontHeaderStore header block.
ItemGridSearch + category filter over items already loaded by the host, plus the card grid. Pure client-side filtering, no fetching.
ItemCard / ItemGallerySingle item card and image gallery.
ContactLinks / ShareButtonContact links and a share button.
formatPrice / resolveStorefrontThemePrice formatter and theme resolver (--mn-* tokens, light default).
@cognitiondesk/storefront — CognitionDesk Docs