---
title: "Product details blocks"
description: "4 Pro product details blocks for React. One product, its images, options and price."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/product-details
---

# Product details blocks

4 Pro product details blocks for React. One product, its images, options and price.

## Installation

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 any block by name, for example:

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

## Blocks
- [Product overview](https://ui.edbn.me/docs/blocks/product-overview): The top of a product page: a photo carousel with thumbnails beside a buy box with glaze, size, quantity and Add to bag.
  Install: `npx shadcn@4.19.0 add @edbn/product-overview`
- [Product reviews](https://ui.edbn.me/docs/blocks/product-reviews): A product's reviews: the average and a bar per rating beside a list you can search, filter, sort and page through.
  Install: `npx shadcn@4.19.0 add @edbn/product-reviews`
- [Product quick view](https://ui.edbn.me/docs/blocks/product-quick-view): Product cards with Quick view: a dialog with photos and a short buy box, or a bottom sheet on phones.
  Install: `npx shadcn@4.19.0 add @edbn/product-quick-view`
- [Product specs](https://ui.edbn.me/docs/blocks/product-specs): A product's specifications: four highlights, grouped spec tables, and care, shipping and returns in an accordion.
  Install: `npx shadcn@4.19.0 add @edbn/product-specs`

All blocks: https://ui.edbn.me/docs/blocks · https://ui.edbn.me/docs/blocks.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