Invoice studioPro
An editable invoice with live totals and a clear save flow.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { InvoiceStudio } from 'animui/invoice-studio';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this as a starting point for creating an invoice. Persist line items and totals through your own service.
import { InvoiceStudio, type InvoiceLine } from "animui/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.
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.
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.