Invoice studio
ProAn editable invoice with live totals and a clear save flow.
Live block · sample data
- Creating or editing an invoice or quote with line items.
- Forms that need a live subtotal and total as quantities and rates change.
- Use billing-overview to show past invoices and plan status.
- Use checkout-flow when the customer is paying.
- Use sortable-data-table for read-only lists of invoices.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as a starting point for creating an invoice. Persist line items and totals through your own service.
example.tsx
import { InvoiceStudio, type InvoiceLine } from "@/components/arc/blocks/invoice-studio/invoice-studio"; export function NewInvoice() { async function save(lines: InvoiceLine[]) { await fetch("/api/invoices/draft", { method: "POST", body: JSON.stringify({ lines }) }); } return <InvoiceStudio onSave={save} />;}API reference
2 parts. The first is the root.
InvoiceStudio
An editable invoice with line items, live subtotal and total, and a save draft action. Client details and starting lines are sample data.
PropTypeDefaultDescription
onSave(lines: InvoiceLine[]) => void | Promise<void>–Called with parsed lines when every line has a description. Awaited; a thrown error shows a save error.InvoiceLine
Type passed to onSave.
PropTypeDefaultDescription
descriptionRequiredstring–Line description.quantityRequirednumber–Quantity, clamped to zero or more.rateRequirednumber–Unit rate in USD.- The total is an output element with aria-live and aria-atomic.
- Save progress and validation messages are announced via role="status".
- Row inputs and remove buttons carry per-line aria-labels.
- Totals roll with a short vertical slide and blur when they change.
- Added and removed lines animate height via layout.
- Reduced motion uses opacity-only swaps with zero duration.
- Below 760px line columns narrow; below 620px the column header hides and each line becomes a stacked card with its own labels.
- Below 380px the from and to parties stack into one column.
- Totals recompute on each edit and roll with a short slide; line add and remove animate height with layout.
- Lines are not virtualized, which suits invoices with a few dozen lines.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for creating or editing an invoice or quote.
- Replace startingLines and the client header; totals are USD only.
- Recompute totals on the server; treat onSave data as a draft.
The full library index for assistants is at /llms.txt.