Invoice Studio
Prov1.0.0Write, total and send an invoice, with imported usage lines, VAT and its payment status.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { InvoiceStudio, type InvoiceStudioProps } from "@/components/ui/notchset/blocks/invoice-studio";
export function Invoice({ invoice }: { invoice: Omit<InvoiceStudioProps, "onSend" | "onSaveDraft"> & { id: string } }) {
return (
<InvoiceStudio
{...invoice}
onSaveDraft={(draft) => fetch(`/api/invoices/${invoice.id}`, { method: "PUT", body: JSON.stringify(draft) })}
onSend={(draft) => fetch(`/api/invoices/${invoice.id}/send`, { method: "POST", body: JSON.stringify(draft) }).then((r) => {
if (!r.ok) throw new Error("send failed");
})}
/>
);
}Props
number / issued / due–stringShown in the header.
from / billTo–{ name, address } / { name, address, email }The parties; billTo.email is named when the invoice is sent.
lines–{ id, description, quantity, rate, metered? }[]Quantity and rate are strings so typing stays exact; only numbers are accepted.
taxRates–number[]VAT choices as fractions (default 0.19, 0.07, 0).
onSend / onMarkPaid / onReopen / onSaveDraft–(invoice) => PromiseEach gets { lines, taxRate, subtotal, tax, total }; resolve to move on, reject to stay put.
onImportUsage / importLabel–() => Promise<lines> / stringAdds the import button; returned lines are marked METERED.
Anatomy
- Draft, sent and paid are local states driven by your promises.
- Imported lines are marked metered; removing one lets you import again.
- An invoice with no amount can't be sent.
InvoiceStudiodata-slot="invoice-studio"Header, parties, lines, totals and actions.
Source
components/ui/notchset/blocks/invoice-studio.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/invoice-studioNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Agencies and products that bill customers by invoice
- Turning metered usage into invoice lines
Use something else when
- Card checkout: use Checkout
- A read-only receipt: render a static table
Mistakes to avoid
- Recalculate totals on the server before sending; the block's totals are for the person writing it
- Lock edits server-side after sending, not only in the UI
Agents find it by
- invoice, invoice editor, billing, line items, send invoice, mark as paid, usage billing, vat, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/invoice-studio.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- Tab
- Through the cells of each line
- Enter / Space
- Add a line, import, save, send
Accessibility
- Line items are a table; every input is labelled with its line and column
- The status tag and the status line are announced as they change
- Remove and VAT buttons are aria-disabled once the invoice is sent
Motion
- Typing
- Line amounts and totals roll, 60ms apart
- New lines
- Rise in as they are added or imported
- Send
- The scanner, then the status tag inverts
Responsive
- Under 600px (container width) each line puts its description on its own row above quantity, rate and amount.
Performance
- Totals are simple sums on each keystroke; nothing runs while idle.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
