Product List

Fetch and display multiple products. Each product gets its own Product context for isolated state management.

Interactive Demo

ProductList is an optional React convenience over the mockup URL. It fetches the public catalog and renders a card per product — every mockup is still just a URL.

Try different product list layouts using the variant switcher. Each product is automatically wrapped in its own Product context:

Loading playground...

ProductList Props

limitnumber

Maximum number of products to fetch. Defaults to 10.

childrenReactNoderequired

Template for each product card. Receives Product context automatically.

gridClassNamestring

CSS classes for the grid layout. Defaults to a responsive grid layout.

classNamestring

CSS classes for the container element.

ProductCard Props

Each item renders a ProductCard — its props are documented on the ProductCard page.

Installation

npm install @snowcone-app/ui

Styling — your Tailwind v4 build compiles it. In your global stylesheet, add @import '@snowcone-app/ui/styles/globals.css' (brings in Tailwind, the theme tokens, and an @source for the package) plus an @source for your own code. In Next.js, also add transpilePackages: ['@snowcone-app/ui']. Add className="dark" on an ancestor for dark mode.