Invoice
A compact invoice with billing parties, metadata, line items, totals, and an optional note.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphInvoice } from '@fractaldesign/machines-ui';Preview
From
machines-ui
hello@example.com
Bill to
Acme Studio
14 Market Street
San Francisco, CA
| Description | Qty | Rate | Amount |
|---|---|---|---|
| Design system | 1 | 4,200 | 4,200 |
| Motion pass | 1 | 1,800 | 1,800 |
| Docs rewrite | 8h | 180 | 1,440 |
- Subtotal
- 7,440
- Tax
- 0
- Amount due
- 7,440
Net 30. Wire to the account on file.
<script lang="ts">
import { GraphInvoice, type InvoiceItem } from '@fractaldesign/machines-ui';
const items: InvoiceItem[] = [
{ description: 'Design system', qty: '1', rate: '4,200', amount: '4,200' },
{ description: 'Motion pass', qty: '1', rate: '1,800', amount: '1,800' },
{ description: 'Docs rewrite', qty: '8h', rate: '180', amount: '1,440' }
];
</script>
<GraphInvoice
title="INVOICE 0041"
from={{ name: 'machines-ui', lines: ['hello@example.com'] }}
to={{ name: 'Acme Studio', lines: ['14 Market Street', 'San Francisco, CA'] }}
meta={[
{ label: 'No.', value: '0041' },
{ label: 'Issued', value: 'Mar 12, 2026' },
{ label: 'Due', value: 'Apr 11, 2026' }
]}
{items}
totals={[
{ label: 'Subtotal', value: '7,440' },
{ label: 'Tax', value: '0' },
{ label: 'Amount due', value: '7,440', accent: true }
]}
note="Net 30. Wire to the account on file."
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. |
| from | InvoiceParty | — | Optional sender party, with a name and lines of contact or address text. |
| to | InvoiceParty | — | Optional billed party, with a name and lines of address text. |
| meta | InvoiceMeta[] | — | Optional labeled invoice details such as number and dates. |
| items* | InvoiceItem[] | — | Line items in display order, with description, optional quantity and rate, and amount. |
| totals | InvoiceTotal[] | — | Optional labeled totals shown beneath the line items. |
| note | string | — | Optional note displayed at the end of the invoice. |
| corner | string | — | Character drawn at each corner of the frame. |
| class | string | '' |
API
- class forwarded to the outer element
- motion reveals on scroll into view
Types
| Name | Kind | Description |
|---|---|---|
| InvoiceParty | interface | Invoice document: from / bill-to blocks, meta, line items, totals. |
| InvoiceMeta | interface | |
| InvoiceItem | interface | |
| InvoiceTotal | interface |
Theming
CSS custom properties this component reads.
- --graph-accent
- --text-primary
- --text-secondary
Related
Built from
src/lib/components/graphs/GraphInvoice.svelte