# Shadcn Product Grid blocks

> Product listing grids with responsive layouts, quick views, and filtering support.

- Type: Pro blocks (eCommerce)
- Page: https://web.dev.reui.io/blocks/ecommerce/product-grid
- Blocks: 6
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- A collection or category page body of photo tiles with prices, sale strikethroughs and a wishlist save
- Comparing colorways through swatches, or buying from the listing with a hover size picker or cart button
- Editorial or lookbook edits whose tiles add a story and specs, or fade to an on model photo on hover

## When not to use

- Dashboard tiles for KPIs, people or records in an app, with no price or buy control: use the [Card blocks](https://web.dev.reui.io/blocks/application/card.md)
- A bordered panel surface with header, body and footer slots for content not for sale: use [Frame](https://web.dev.reui.io/components/frame.md) (`get_component("frame")`)
- A listing with its own heading, sort and filter toolbar, breadcrumb or carousel rail: use the [Product Card blocks](https://web.dev.reui.io/blocks/ecommerce/product-card.md)

## Agent notes

- `ProductGrid` takes no props and maps `PRODUCTS` from data.ts, where each `price` is a preformatted string and every `href` is a hash placeholder
- The wishlist toggle only flips the local `likedProducts` set seeded from `DEFAULT_LIKED_PRODUCT_IDS`; persist it to your own wishlist store
- Each page.tsx adds a `min-h-svh` main and `ProductGrid` sets `max-w-6xl` with its own padding; drop both inside your storefront layout

## Blocks

- [Swatch Swap Grid](https://web.dev.reui.io/blocks/ecommerce/product-grid/product-grid-1.md): Ecommerce Product Grid with Color Swatches, Hover Wishlist, and Sale Price Badges. Best for a shadcn Card per tile in 2 columns, where picking a color swatch swaps the photo and names the color.
- [Stacked Panel Grid](https://web.dev.reui.io/blocks/ecommerce/product-grid/product-grid-2.md): Frame-Panel Product Card Grid with Color Swatch Image Swap and Wishlist Toggle. Best for a Frame per tile holding 2 stacked panels, a full bleed photo panel over a details panel with swatches and price.
- [Add-to-Cart Grid](https://web.dev.reui.io/blocks/ecommerce/product-grid/product-grid-3.md): Frameless ecommerce product grid with per-card Add to Cart and hover wishlist toggle. Best for borderless tiles in 3 columns with star ratings, a linked review count and a full width Add to Cart button.
- [Numbered Story Grid](https://web.dev.reui.io/blocks/ecommerce/product-grid/product-grid-4.md): Editorial product grid with numbered horizontal chapter tiles, story line and 3-up specs. Best for horizontal tiles numbered 01 to 06, a small square photo beside a story sentence, 3 labeled specs and the price.
- [Quick Size Grid](https://web.dev.reui.io/blocks/ecommerce/product-grid/product-grid-5.md): Ecommerce product grid with hover quick-buy panel and in-stock-aware size picker. Best for portrait photos with a hover quick-buy panel for XS to XL sizes, sold out ones struck, and a shipping line under the price.
- [Shop-the-Look Grid](https://web.dev.reui.io/blocks/ecommerce/product-grid/product-grid-6.md): Apparel 2x2 product grid with hover lifestyle image cross-fade and expanding color swatch pill. Best for a product shot that fades to an on model photo on hover, plus a stacked swatch pill and a Shop The Look link.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.