Invoice
GraphInvoice
Document table for invoices and quotes. From, bill-to, line items, and a totals block.
Command
pnpm dlx shadcn@latest add <origin>/r/graph-invoice.jsonStudio invoice
From, bill-to, line items with qty and rate, total in accent.
From
markdown graphs
kshv.me
GSTIN 29AXXXXX1234Z5
Bill to
Acme Studio
14 Market Street
San Francisco, CA
- No.
- 0041
- Issued
- Mar 12, 2026
- Due
- Apr 11, 2026
| 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.
Quote
No qty or rate columns. Just description and amount.
From
markdown graphs
Bill to
Northwind
- Valid until
- May 01
| Description | Amount |
|---|---|
| Registry install | 0 |
| Custom graph | 2,400 |
- Estimate
- 2,400
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge of the frame. |
| from | InvoiceParty | — | Issuer name and optional address lines. |
| to | InvoiceParty | — | Recipient name and optional address lines. |
| meta | InvoiceMeta[] | — | Fields like number, issued, due. |
| items | InvoiceItem[] | — | Line items. qty and rate are optional; columns hide when unused. |
| totals | InvoiceTotal[] | — | Rows under the items. Set accent on the amount due. |
| note | string | — | Muted line under the totals. Payment terms, etc. |
| corner | string | "+" | Character at each corner of the frame. |
| className | string | — | Passed to the outer frame. |