Product grid list
Responsive product cards with brand meta, price, full-card links, and a subtle image zoom on hover.
Preview & code
GFA Studio CLI · Coming soon
Installation
CLI
GFA Studio CLI — Coming soon
The `npx gfa-studio` installer is not published yet. Use Manual install below or download the artifact JSON.
Artifact JSON
https://ui.gkhn.dev/gfa/product-grid-list.jsonManual
- Download the component source from https://ui.gkhn.dev/gfa/product-grid-list.json (or copy from this repo: apps/web/src/blocks/gfa/product-grid-list.tsx).
- Place it in your project (for example: ./src/blocks/gfa/product-grid-list.tsx) and adjust imports/aliases.
- Ensure cn from @/lib/utils exists.
- Theme tokens and utilities should align with globals.css.
Dependencies
Uses next/image, Lucide (ArrowUpRight), and cn from @/lib/utils. Each card is a single link when href is set. Demo images live under public/media/product-grid/.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | readonly ProductGridItem[] | — | Products to render; each entry is a ProductGridItem. |
| className | string | — | Extra classes on the root list element (e.g. max width). |
Each item supports:
- `id` — stable React key.
- `brand`, `category`, `name`, `price` — footer copy (`brand · category` meta line).
- `href` — when set, the whole card is a link (opens in a new tab for `http` URLs).
- `imageSrc`, `imageAlt` — passed to `next/image`.