---
title: "Product editor"
description: "A shop product on the Pro forms: details, price with VAT worked out, photos, glaze and size variants, stock, and Unsaved changes with Save."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/product-editor
---

# Product editor

A shop product on the Pro forms: details, price with VAT worked out, photos, glaze and size variants, stock, and Unsaved changes with Save.

Title, description, status and category, then the price before VAT with the price customers pay worked out as you type, and an optional compare-at price that has to be higher. Photos reorder, become the cover or go from each one's menu, and the last tile takes dropped or chosen files (photos only, up to 20 MB). Variants are glaze × size rows with their own SKU, price and stock; SKUs must be unique on the product and across the shop, and Add variant refuses one that already exists. Any edit turns the header into the save bar: Unsaved changes, Discard (asked first) and Save, which shows every problem at once, keeps its width while saving and then says when it saved. Turning off Track stock keeps the counts as they were.

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

## Dependencies
- npm: lucide-react@^1.33.0, zod@^4.3.5, react-hook-form@^7.87.0
- edbn: edbn-base, alert-dialog, aspect-ratio, button, card, dropdown-menu, dropzone, field, input-group, popover, select, form-core, form-fields

## Source

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

## More dashboards blocks

All 13, with install commands: https://ui.edbn.me/docs/blocks/dashboards (Markdown: https://ui.edbn.me/docs/blocks/dashboards.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