---
title: "Product quick view"
description: "Product cards with Quick view: a dialog with photos and a short buy box, or a bottom sheet on phones."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/product-quick-view
---

# Product quick view

Product cards with Quick view: a dialog with photos and a short buy box, or a bottom sheet on phones.

Built from Dialog, Sheet, Carousel, ToggleGroup, NumberField and Toast. Quick view opens the piece's photos beside its size, quantity, Add to bag and a link to the full page. Focus starts on the piece's name, and Escape closes it without closing anything around it. Adding shows its progress, then closes the dialog with a toast. When the section is phone-narrow the same content rises as a bottom sheet with the photos on top.

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-quick-view
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, aspect-ratio, button, carousel, dialog, field, number-field, sheet, spinner, text-link, toast, toggle-group

## 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 details blocks

All 4, with install commands: https://ui.edbn.me/docs/blocks/product-details · https://ui.edbn.me/docs/blocks/product-details.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