Invoice studioPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/invoice-studio

• Markdown: https://ui.xzero.co.uk/components/blocks/invoice-studio/markdown

• Access: Xzero Pro

• Registry id: invoice-studio

• Source file: registry/blocks/invoice-studio/invoice-studio.tsx

• Built from: Input, Button, Motion

• Keywords: react invoice editor, invoice generator ui, line items form, quote builder, invoice form with totals, billing invoice component

Use this as a starting point for creating an invoice. Persist line items and totals through your own service.

When to use

• Creating or editing an invoice or quote with line items.
• Forms that need a live subtotal and total as quantities and rates change.

When not to use

• 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

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/invoice-studio

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { InvoiceStudio, type InvoiceLine } from "@/components/xzero/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

InvoiceStudio

An editable invoice with line items, live subtotal and total, and a save draft action. Client details and starting lines are sample data.

Prop	Type	Default	Description
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.

Prop	Type	Default	Description
description (required)	string	–	Line description.
quantity (required)	number	–	Quantity, clamped to zero or more.
rate (required)	number	–	Unit rate in USD.

Accessibility

• 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.

Motion

• 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.

Responsive behavior

• 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.

Performance

• 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

• 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.

Related

• Billing overview: A billing page where the plan card morphs into a picker and usage, invoices, and card follow.
• Number field: Enter a bounded number with clear increment controls.
• Sortable data table: Compare structured records with sortable columns.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt