Invoices and billing
A list, one invoice, and the form that builds one with line items and totals. The document, not the accounting.
⚠️ Pro edition
These screens are in the Pro download. The free edition ships the design system and the demo, not the application screens.
The screens
3 screens, at these routes in your download. Open them beside this page.
| Route | Screen | What it is for |
|---|---|---|
| /invoices | Invoices | Every invoice: number, customer, status, due date and amount. |
| /single-invoice | Invoice | One invoice laid out for reading and printing, with its line items and totals. |
| /create-invoice | Create invoice | Line items you add and remove, quantities, rates and a live total. |
What you get
- Line items that add, remove and recalculate, with the total following the rows.
- Paid, due, overdue and draft as visible states rather than a text column.
- A print layout for the single invoice, so the browser's print output is the document rather than the application.
What you connect
These are interfaces, not an application.They render, they hold their own state, and they talk to nothing. Everything below is your application's, and none of it is supplied.
- Every calculation you can be audited on. Tax, rounding rules, currency conversion and discounts are not supplied, and the demo total is arithmetic rather than a finance engine.
- Numbering. Invoice numbers are demo strings. Sequence, uniqueness and legal format are yours.
- Payment. No provider, no status webhook, no reconciliation.
- Delivery. Nothing is emailed or filed.
Built from
Nothing here is a one-off. Each screen composes the same families documented in the reference, so changing a token moves them with the rest of the product.
data-table, form, badge, table, card.
Next
A customer screen, end to end builds one of these from an empty route, and Theming is how you make them look like yours.