Invoice studio
ProA full invoicing app: invoices grouped by status beside the invoice itself, edited in place on the page with live totals, with client, terms, tax and payment methods in a details panel and a send dialog. Drag lines to reorder them, record payments or send reminders, and undo any change.
- An invoicing or billing app screen: invoices by status beside the invoice being edited.
- Editing a draft invoice in place with live totals, then sending it and tracking payment.
- Freelance, studio or agency tools that bill a handful of clients each month.
- Use billing-overview to show a customer their own plan, usage and past invoices.
- Use checkout-flow when the customer is paying.
- Use sortable-data-table for a read only list of invoices without editing.
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.
import { InvoiceStudio, type InvoiceLine } from "@/components/arc/blocks/invoice-studio/invoice-studio"; export function InvoicesPage() { async function save(lines: InvoiceLine[]) { await fetch("/api/invoices/draft", { method: "POST", body: JSON.stringify({ lines }) }); } return ( <div style={{ height: "100dvh" }}> <InvoiceStudio onSave={save} onSend={(invoice, { to, message }) => sendInvoice(invoice.id, to, message)} onRecordPayment={(invoice) => markPaid(invoice.id)} /> </div> );}API reference
2 parts. The first is the root.
InvoiceStudio
A full invoicing screen inside the Arc screen shell, under Northstar Studio's own frame logo. The sidebar filters invoices by status (all, drafts, open, overdue, paid) with live counts, then a receivables ledger: the total outstanding and overdue, and each client's balance beside its logo (overdue balances in red with an alert glyph, settled clients and drafts in quiet text); a client row filters the list. The footer counts up November's collected money when a payment is recorded and opens the paid invoices. The list column has Arc's search field and invoices grouped by status with how late or how soon each one is due. The selected invoice is the page the client receives: on a draft every line, quantity, rate and note is edited in place, lines reorder by drag or Alt plus the arrow keys, and totals roll as you type, with an autosave status. The right panel (a sheet on narrow frames) picks the client with Arc's Select, payment terms and sales tax with Arc's SegmentedControl, accepted payment methods (Stripe card, Apple Pay, Google Pay, bank transfer) and reminders with Arc's Switch, and shows the activity history. Drafts send through an email dialog; open and overdue invoices take a reminder or a recorded payment; every change can be undone. The sample studio, Northstar Studio, has seven clients and twelve invoices around Thursday 12 November 2026.
onSave(lines: InvoiceLine[]) => void | Promise<void>–Called with the selected draft's parsed lines when it autosaves, 700 ms after an edit, once every line has a description. Awaited; a thrown error shows Could not save.invoicesStudioInvoice[]studioInvoicesEvery invoice: number, client, status (draft, sent or paid), issue day, terms in days, tax rate, lines, notes, payment methods, reminders, activity and, when paid, the day and method. A sent invoice past its due day reads as overdue.clientsInvoiceClient[]invoiceClientsClients with a contact, email, avatar, two line address, an Arc tone for their logo tile and an optional mark (one of the shell's twelve logo marks, such as "lens" or "bridge").studioInvoiceStudioInfostudioInfoThe sender printed on the page: name, address, billing email and the bank transfer line.defaultInvoiceIdstring"ns-1049"The invoice that opens first.onSend(invoice: StudioInvoice, details: { to: string; message: string; attachPdf: boolean; copyMe: boolean }) => void | Promise<void>–Called from the send dialog. Awaited; a thrown error keeps the dialog open with an error. Without it sending is simulated and the dialog says so.onRecordPayment(invoice: StudioInvoice) => void–Called with the paid invoice when a payment is recorded on an open or overdue invoice.classNamestring–Class on the outer element.InvoiceLine
Type passed to onSave.
descriptionRequiredstring–Line description, trimmed.quantityRequirednumber–Whole quantity from 0 to 999.rateRequirednumber–Unit rate in USD, rounded to cents.- The invoices are a listbox grouped by status with one tab stop: up, down, Home and End move the selection instantly, Enter opens the invoice. Slash focuses the search and N starts a new invoice.
- Every field on the page has a per line label. A drag handle is also a button that moves its line with the arrow keys, and Alt plus up or down moves the line from any of its fields; moves are announced.
- Terms and tax are Arc segmented controls that follow the arrow keys; payment methods and reminders are Arc switches; the client is an Arc select with typeahead, Escape to close and focus back on its trigger.
- Receivables rows are buttons named with the client's full balance and overdue amount; the open client is marked as current. Icon buttons in the invoice bar carry labels and tooltips.
- The send dialog is modal: focus moves in and stays in, Escape closes it, Cmd or Ctrl plus Enter sends, and focus returns to the Send button. Address errors are tied to the field.
- Status is always written next to its colour and its own glyph. Sends, payments, exports and errors are announced in a polite live region with an Undo button where it applies.
- Totals and line amounts roll once when they change, with a 2px blur and tabular numerals so widths stay put.
- Added and removed lines open and close their height on the smooth spring; dragged lines lift with a floating shadow and the rest make room.
- Switching invoices crossfades the page and the panel once. The list selection and the open client in the ledger are instant full row fills that never travel.
- Collected money counts up on Arc's animated counter when a payment is recorded; ledger balances update in place and the rows keep their order.
- Arc's segmented control, switch, checkbox and select bring their own motion. Copy and reminder confirmations crossfade their glyph once at a fixed button width.
- Buttons squeeze to 0.97; the select trigger answers with colour only. Reduced motion removes every movement and keeps the final states.
- From 1080px the details panel sits beside the page; below that it is a sheet opened from the header. Below 900px the sidebar is a sheet.
- Below 900px main width the list narrows to 264px; below 680px the list and the invoice take turns, with a back button on the invoice.
- When the page itself is under 440px wide, each line becomes a description row over a quantity, rate and amount row, and the totals move above the notes.
- Totals recompute on each edit; autosave is debounced by 700 ms. Lines and the list are not virtualized, which suits a few hundred invoices with a few dozen lines each.
- Line reorder uses Motion's Reorder; the page and panel crossfade once per selection.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for an invoicing or billing tool: a list of invoices beside the invoice itself, edited in place, with send and payment actions.
- The screen fills its container, so give the parent a height (the preview is 1440 by 900). The list, the page and the panel scroll inside the screen, never the outer page.
- Replace the clients, invoices and studio in invoice-studio-data.ts. TODAY fixes the clock so server and client render the same due dates.
- Sending and reminders are simulated and say so. Wire onSend, onRecordPayment and onSave to your backend.
- Built on Arc's screen shell with Arc's Button, SearchField, Select, SegmentedControl, Switch, Checkbox, Input, Textarea, Badge, Tooltip and AnimatedCounter. Client and studio logos are the shell's ScreenShellMark; Stripe, Apple and Google marks are Simple Icons (CC0) drawn in currentColor as sample content.
The full library index for assistants is at /llms.txt.