---
title: "Quote builder with PDF"
description: "A trade quote on the Pro forms: lines in sixes, discount, delivery and VAT, a live A4 preview, the real PDF on demand, and Send."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/quote-builder
---

# Quote builder with PDF

A trade quote on the Pro forms: lines in sixes, discount, delivery and VAT, a live A4 preview, the real PDF on demand, and Send.

Loam Wholesale's revised quote Q-0143 for Fern & Fig. Each line picks a product and a glaze and takes a quantity in sixes (the steppers move by six; typed values that aren't sixes are refused), with the trade price per piece and the line total; lines can be added and removed. Below them a trade discount, delivery, VAT at 20% and the total, worked in pence, then the date the quote is valid until, the payment terms and a note to the buyer. From 1024px a white A4 sheet beside the lines shows the quote as it will print and follows every keystroke. Render PDF swaps it for the Pro PDFs' quote template, rendered in the browser from the wasmUrl you self-host (the compiler's .wasm from @myriaddreamin/typst-ts-web-compiler); after that, edits render the PDF again after a 600ms pause and the preview says Updating. Download PDF saves the current version. Send quote checks for at least one line, quantities in sixes and a valid-until date after today, focusing the first problem; then it shows Sending… and, once sent, "Quote Q-0143 sent to asha@fernandfig.example" in place, with the quote locked.

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/quote-builder
```

## Dependencies
- npm: lucide-react@^1.33.0, react-hook-form@^7.87.0, zod@^4.3.5
- edbn: edbn-base, alert, badge, button, field, number-field, spinner, form-core, form-date-field, form-fields, pdf-browser

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