---
title: "Cart page"
description: "Kiln & Co.'s cart: the pieces with quantity, Save for later and Remove with Undo, gift options, a delivery estimate with a free-shipping meter, and a summary with Checkout."
plan: Pro
docs: https://ui.edbn.me/docs/templates/cart-page
---

# Cart page

Kiln & Co.'s cart: the pieces with quantity, Save for later and Remove with Undo, gift options, a delivery estimate with a free-shipping meter, and a summary with Checkout.

The product page's store header and footer, with the cart held by the page, so the header's count, its sheet, the lines and the summary always agree. Each line has its photo, name, glaze, unit price, a quantity stepper up to 12 and the line total; Remove leaves Removed Tripod bowl. Undo in its place, and Save for later moves the piece to a list under the cart. Gift wrap adds $6 to the total at once, and the gift note counts to 200 characters. The delivery estimate takes the country and postcode from the Pro forms' address fields, checks them per country and says when it arrives and what shipping costs, with a meter of how far the order is from free shipping over $80. From 1024px the order summary sits beside the cart and stays in view: subtotal, gift wrap, shipping, the discount code (a wrong or ended code says why), estimated tax once a US ZIP code is checked, the total and Checkout, which links to checkout-page. On phones a sticky bar carries the total and Checkout, and View summary opens the summary in a drawer. Goes well with (collection-carousel) shows pieces not in the cart. The sample has the bowl just removed and an estimate for a Portland ZIP code; without it, three pieces and nothing typed.

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/cart-page
```

## Dependencies
- npm: lucide-react@^1.33.0, zod@^4.3.5
- edbn: edbn-base, aspect-ratio, badge, button, card, carousel, checkbox, collapsible, drawer, field, input, input-group, meter, native-select, navigation-menu, number-field, select, separator, sheet, spinner, text-link, textarea, form-address-fields, form-core

## Source

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

## More checkout templates

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