---
title: "Product grid"
description: "A shop section of product cards in four columns, with quick add on each photo, a sale price and a sold-out piece."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/product-grid
---

# Product grid

A shop section of product cards in four columns, with quick add on each photo, a sale price and a sold-out piece.

Built from AspectRatio, Badge, Button, Tooltip, TextLink and Toast. Each card is one link; its quick add shows on hover or focus, and always on touch screens. Quick add turns into a check for a moment and a toast confirms the piece. A sold-out piece dims its photo and its quick add stays focusable, saying it's sold out. A card with a second photo crossfades to it on hover, without the fade when motion is reduced. The grid has four columns on desktop, three on tablets and two on phones.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/product-grid
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, aspect-ratio, badge, button, text-link, toast, tooltip

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More product lists blocks

All 4, with install commands: https://ui.edbn.me/docs/blocks/product-lists · https://ui.edbn.me/docs/blocks/product-lists.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt