---
title: "Product overview"
description: "The top of a product page: a photo carousel with thumbnails beside a buy box with glaze, size, quantity and Add to bag."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/product-overview
---

# 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.

Built from Carousel, ToggleGroup, NumberField, Toggle, Accordion and Toast. Photos change with the arrows, the thumbnails, the arrow keys or a swipe, and each change is announced. Picking a glaze shows its photos. A size that glaze is out of is struck through and can't be picked, and if the chosen size runs out, Add to bag says so and disables. The quantity stops at the stock left. Add to bag shows its progress, then Added, with a toast. On phones the photos sit above the buy box.

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-overview
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, accordion, aspect-ratio, attachment, button, carousel, field, number-field, spinner, text-link, toast, toggle, 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