{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "invoice",
  "name": "Invoice",
  "category": "Data display",
  "description": "A printable invoice or receipt: parties, line items, totals with tax, and payment notes.",
  "tags": [
    "invoice",
    "receipt",
    "bill",
    "quote",
    "order",
    "billing",
    "sales",
    "accounting",
    "print"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "invoice",
      "receipt",
      "bill",
      "order summary",
      "printable document"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/invoice",
  "markdownUrl": "https://mian.ro/ai/components/invoice.md",
  "classes": [
    {
      "name": "mn-invoice",
      "description": "The document. Add mn-card for the noodle’s surface."
    },
    {
      "name": "mn-invoice-head",
      "description": "Title, number and dates (a <dl>)."
    },
    {
      "name": "mn-invoice-parties",
      "description": "From / Bill to (<address>)."
    },
    {
      "name": "mn-invoice-totals",
      "description": "Subtotal, tax and total (<dl>); mn-invoice-total on the last pair."
    },
    {
      "name": "mn-invoice-foot",
      "description": "Payment terms and notes."
    }
  ],
  "accessibility": [
    "Use a real <table> with column headers for line items, and <address> for the parties.",
    "The total must be in text, not only emphasised; print styles keep it on paper."
  ],
  "examples": [
    {
      "title": "Invoice",
      "description": null,
      "html": "<article class=\"mn-card mn-invoice\" style=\"max-width:44rem\" aria-labelledby=\"inv-t\">\n  <header class=\"mn-invoice-head\"><div><h2 id=\"inv-t\">Invoice</h2><span class=\"mn-muted\">Ledger GmbH · VAT DE318 442 910</span></div>\n    <dl><dt>Number</dt><dd>2026-0419</dd><dt>Issued</dt><dd>25 Sep 2026</dd><dt>Due</dt><dd>9 Oct 2026</dd></dl></header>\n  <div class=\"mn-invoice-parties\"><div><h3>From</h3><address>Ledger GmbH<br>Torstraße 12<br>10119 Berlin, Germany</address></div><div><h3>Bill to</h3><address>Halden &amp; Co SRL<br>Str. Memorandumului 28<br>400114 Cluj-Napoca, Romania</address></div></div>\n  <div class=\"mn-table-wrap\"><table class=\"mn-table\"><thead><tr><th scope=\"col\">Description</th><th scope=\"col\" class=\"mn-num\">Qty</th><th scope=\"col\" class=\"mn-num\">Price</th><th scope=\"col\" class=\"mn-num\">Amount</th></tr></thead>\n  <tbody><tr><td>Team plan, October</td><td class=\"mn-num\">1</td><td class=\"mn-num\">€190.00</td><td class=\"mn-num\">€190.00</td></tr><tr><td>Extra entities</td><td class=\"mn-num\">4</td><td class=\"mn-num\">€25.00</td><td class=\"mn-num\">€100.00</td></tr><tr><td>API calls over plan (4,210)</td><td class=\"mn-num\">4.21</td><td class=\"mn-num\">€0.40</td><td class=\"mn-num\">€1.68</td></tr></tbody></table></div>\n  <dl class=\"mn-invoice-totals\"><dt>Subtotal</dt><dd>€291.68</dd><dt>VAT (reverse charge)</dt><dd>€0.00</dd><dt class=\"mn-invoice-total\">Total due</dt><dd class=\"mn-invoice-total\">€291.68</dd></dl>\n  <p class=\"mn-invoice-foot\">Pay by SEPA transfer to DE44 1001 0010 0123 4567 89, reference 2026-0419. VAT reverse charge, Art. 196 Directive 2006/112/EC.</p>\n</article>"
    }
  ],
  "css": ".mn-invoice { container: mn-invoice / inline-size; display: grid; gap: 2rem; padding: clamp(1.25rem, 4vw, 2.75rem); font-size: var(--mn-text-sm); line-height: 1.55; }\n.mn-invoice > * { margin: 0; }\n.mn-invoice-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.25rem 2rem; }\n.mn-invoice-head h2 { margin: 0 0 .35rem; font: var(--mn-heading-weight) 1.75rem/1.1 var(--mn-font-heading); letter-spacing: -.02em; }\n.mn-invoice-head dl { display: grid; grid-template-columns: auto auto; gap: .25rem 1rem; margin: 0; }\n.mn-invoice-head dt, .mn-invoice-parties h3 { color: var(--mn-muted); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }\n.mn-invoice-head dd { margin: 0; font-variant-numeric: tabular-nums; }\n.mn-invoice-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.5rem; }\n.mn-invoice-parties h3 { margin: 0 0 .4rem; }\n.mn-invoice-parties address { font-style: normal; }\n.mn-invoice-totals { display: grid; grid-template-columns: 1fr auto; gap: .45rem 2rem; width: min(100%, 20rem); margin-inline-start: auto; }\n.mn-invoice-totals dt { color: var(--mn-muted); }\n.mn-invoice-totals dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }\n.mn-invoice-totals .mn-invoice-total { padding-top: .6rem; border-top: var(--mn-border-w) solid var(--mn-fg); color: var(--mn-fg); font-size: 1.0625rem; font-weight: 700; }\n.mn-invoice-foot { color: var(--mn-muted); font-size: .8125rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/invoice.json"
  }
}