CommerceProductGrid
A responsive product grid: an optional heading above a grid of product cards (image, name, optional meta, price). Cards link to a detail page when href is set. Presentational and theme-driven.
Installation
pnpm dlx @hex-core/cli add commerce-product-gridVariant values
columnsCards per row on desktop.| Value | Description |
|---|---|
fourdefault | Four across. |
three | Three across. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
productsrequired | object | — | ReadonlyArray<{ name; price; href?; image?: ReactNode; meta? }>. Product cards. Set href to make the whole card a link to the detail page; images are ReactNode so none is bundled. |
title | ReactNode | — | Optional section heading above the grid. |
columns | enum | four | Cards per row on ≥lg: 'three' or 'four'. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use for category / catalog / search-results pages and 'related products' rows. Set href on each product so the card links to its detail page.
When not to use
Don't use for a single product (use commerce-product-detail) or for marketing feature cards (use marketing-feature-grid). Don't put add-to-cart controls in the grid — that belongs on the detail page.
Common mistakes
- Omitting alt text on product images, so the catalog isn't navigable by screen reader.
- Mixing image aspect ratios — the grid uses a square frame; supply consistently cropped images.
- Putting the price inside the name instead of the price field, breaking the layout alignment.
Accessibility
When href is set the whole card is a single anchor wrapping the image and text, so there's one focusable target per product with an accessible name from the product name. Product images require alt text.
Related components
Token budget: 600
Verified against @hex-core/components@1.12.0