---
title: "Product page"
description: "A Kiln & Co. product page: store header with a live cart, gallery and buy box, details, a bundle, reviews, more from the same firing and the store footer."
plan: Pro
docs: https://ui.edbn.me/docs/templates/product-page
---

# Product page

A Kiln & Co. product page: store header with a live cart, gallery and buy box, details, a bundle, reviews, more from the same firing and the store footer.

The store header from the navbar-store block holds the cart for the whole page: Add to cart and the bundle both update its count and its sheet, where lines can be removed. A breadcrumb sits under it. The gallery is one large photo over four thumbnails that the arrow keys move along, Home and End included. The buy box has the page's one h1, the price, a rating drawn from the reviews below, a glaze radio group with one sold out, quantity, Add to cart with its progress and Added states, shipping and returns, and the details as an accordion. Then the pieces often bought with it (product-bundle), the reviews you can search, filter and sort (product-reviews), more from the same firing on a rail (collection-carousel) and the store footer (footer-store). Every section shares the 1152px page width, one gutter and one 96px gap, and lays out by its own width, so the page holds at 1440, 1024, 768 and 390.

A Pro page template 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-page
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, accordion, aspect-ratio, attachment, avatar, badge, breadcrumb, button, card, carousel, checkbox, collapsible, empty, field, input, input-group, meter, navigation-menu, number-field, pagination, radio-group, select, separator, sheet, spinner, text-link, 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 storefront templates

All 1, with install commands: https://ui.edbn.me/docs/templates/storefront (Markdown: https://ui.edbn.me/docs/templates/storefront.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