---
title: "Invoice detail with PDF"
description: "A billing invoice with its lines, VAT, total and payment timeline, a Download PDF that renders a real PDF, and Email receipt."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/invoice-detail
---

# Invoice detail with PDF

A billing invoice with its lines, VAT, total and payment timeline, a Download PDF that renders a real PDF, and Email receipt.

Kilnwork's October invoice to Pine Street Pottery: who it's from and to, the Studio plan and two extra seats, subtotal, VAT at 20%, total and amount due, worked in pence. A timeline runs from issued through the reminder to paid; an overdue invoice shows since when and why, with Pay. Download PDF renders the invoice in the browser with the Pro PDFs' invoice template and downloads it. The renderer loads only when pressed, from the wasmUrl you pass: self-host the compiler's .wasm from @myriaddreamin/typst-ts-web-compiler. The button reads “Preparing PDF…” at the same width, a second press waits for the first, and a failure says why in words with Retry. Email receipt shows its progress, then where it went. Every step is announced to screen readers.

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/invoice-detail
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, badge, button, card, spinner, table, timeline, 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 settings blocks

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