Blocks / Invoice

Invoice beta Pro

A complete invoice document: parties, line items, tax, total, and the button that gets it paid.

Preview

Invoice INV-2026-104

Issued Nov 2, 2026 · Due Nov 30, 2026

Open

From

Acme Studio K.K.
2-14 Sakura-dori
Nagoya, Japan

Billed to

Northwind Traders
Attn: A. Rivera
[email protected]

DescriptionQtyPriceAmount
Design system audit1$2,400$2,400
Component build-out (day)6$800$4,800
Travel — site visits3$96$288
Subtotal$7,488
Tax (10%)$749
Total due$8,237

Bank transfer · Acme Studio K.K. · Ref INV-2026-104

Built from: Badge, Button — include their CSS alongside this block.

<div class="k-inv">
  <div class="k-inv-head">
    <div><h3>Invoice INV-2026-104</h3><p>Issued Nov 2, 2026 · Due Nov 30, 2026</p></div>
    <span class="badge amber">Open</span>
  </div>
  <div class="k-inv-parties">
    <div><h4>From</h4><p>Acme Studio K.K.<br>2-14 Sakura-dori<br>Nagoya, Japan</p></div>
    <div><h4>Billed to</h4><p>Northwind Traders<br>Attn: A. Rivera<br>[email protected]</p></div>
  </div>
  <table>
    <thead><tr><th>Description</th><th class="n">Qty</th><th class="n">Price</th><th class="n">Amount</th></tr></thead>
    <tbody>
      <tr><td>Design system audit</td><td class="n">1</td><td class="n">$2,400</td><td class="n">$2,400</td></tr>
      <tr><td>Component build-out (day)</td><td class="n">6</td><td class="n">$800</td><td class="n">$4,800</td></tr>
      <tr><td>Travel — site visits</td><td class="n">3</td><td class="n">$96</td><td class="n">$288</td></tr>
    </tbody>
  </table>
  <div class="k-inv-sums">
    <div class="r"><span>Subtotal</span><span>$7,488</span></div>
    <div class="r"><span>Tax (10%)</span><span>$749</span></div>
    <div class="t"><span>Total due</span><span>$8,237</span></div>
  </div>
  <div class="k-inv-foot">
    <p>Bank transfer · Acme Studio K.K. · Ref INV-2026-104</p>
    <button class="btn btn-pri" type="button">Pay $8,237</button>
  </div>
</div>
/* KATA Block: Invoice */
.k-inv{font-family:var(--k-font);color:var(--k-ink);border:1px solid var(--k-line);border-radius:14px;padding:24px;background:var(--k-bg);max-width:640px}
.k-inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px}
.k-inv-head h3{font-size:17px;font-weight:650;letter-spacing:-.015em}
.k-inv-head p{font-size:12.5px;color:var(--k-ink-2);margin-top:3px}
.k-inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.k-inv-parties h4{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--k-ink-3);margin-bottom:5px}
.k-inv-parties p{font-size:13px;line-height:1.65}
.k-inv table{width:100%;border-collapse:collapse;font-size:13.5px}
.k-inv th,.k-inv td{padding:9px 8px;border-bottom:1px solid var(--k-line);text-align:left}
.k-inv th{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--k-ink-3);font-weight:650}
.k-inv td.n,.k-inv th.n{text-align:right;font-variant-numeric:tabular-nums}
.k-inv-sums{margin-left:auto;width:220px;margin-top:12px}
.k-inv-sums .r{display:flex;justify-content:space-between;font-size:13px;padding:5px 8px;color:var(--k-ink-2)}
.k-inv-sums .t{display:flex;justify-content:space-between;font-size:15px;font-weight:700;padding:9px 8px 0;margin-top:5px;border-top:2px solid var(--k-line);color:var(--k-ink)}
.k-inv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.k-inv-foot p{font-size:12px;color:var(--k-ink-3)}
@media (max-width:520px){.k-inv-parties{grid-template-columns:1fr}}

Installation

CLI

node kata-ui.mjs add invoice

Writes the block’s CSS into your project. Everything it is built from comes with it. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet, with the CSS of everything listed under “Built from” above.
  3. Copy the HTML where it belongs.

Usage

The billing page every freelancer and SaaS already redraws badly. Amounts are tabular, the total is unambiguous, and the status badge says where things stand — Paid, Open, Overdue (the badge turns danger, the words never shout). Print styles are the obvious next step: an invoice that cannot be printed is a screenshot.

Previous
Integrations