Invoice

Printable invoice: line items, taxes, discounts and totals in any currency. Pro · Shop and payments › Cart and orders

Print-ready invoice: parties, dates, line items with quantity, unit price, tax and discounts, totals per tax rate in the invoice currency, notes and terms. Printing drops the page chrome, the actions and the theme's colours.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add invoice

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Invoice } from 'valyro-ui-pro';

Props

Prop	Type	Default
`number` *	`string`		Invoice number, e.g. "INV-2026-0042".
`status`	`'draft' \| 'open' \| 'paid' \| 'overdue' \| 'void'`		Badge next to the title. `paid` labels the headline amount "Paid"; `paid` and `void` hide the due date under it.
`issueDate` *	`DateInput`		Date the invoice was issued, listed with the number.
`dueDate`	`DateInput`		Payment due date, listed with the number and under the headline amount.
`from` *	`InvoiceParty`		Sender: their name doubles as the brand next to `logo`, and their details fill the From block.
`to` *	`InvoiceParty`		Customer, shown in the Bill to block.
`items` *	`InvoiceLineItem[]`		Line items; subtotal, discounts, tax per rate and the total are computed from them.
`currency`	`string`	`'USD'`	ISO 4217 code; amounts are minor units of it. Default USD.
`shipping`	`number`		Minor units added after tax.
`amountPaid`	`number`		Minor units already paid; adds "Amount paid" and "Amount due".
`logo`	`ReactNode`		Brand mark shown before the sender's name.
`meta`	`{ label: ReactNode; value: ReactNode }[]`	`[]`	Extra rows next to the dates, e.g. `{ label: 'PO number', value: 'PO-8812' }`.
`notes`	`ReactNode`		Free text under the totals, e.g. a thank-you or payment instructions.
`terms`	`ReactNode`		Payment terms under the totals, next to `notes`.
`actions`	`ReactNode`		Buttons above the document (Download, Print, Pay); hidden when printing. Put the primary one last: on a phone it moves first and takes the full width.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<InvoiceLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Shopping Cart Drawer — Slide-out cart
Checkout Summary — Order summary at checkout
Checkout Form — Checkout: shipping, address type, payment and field validation
Order Tracking — Order tracking: stages, carrier, tracking number and history
Product Card — Product card
Product Grid — Product catalog
Product Filters — Catalog filters
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits
Location Card — Store location: distance, opening hours, pickup options and ordering
Credit Card — Bank card: gradient or two-tone, network detected from the number, contactless

Previous: Order Tracking · Next: Credit Card · All Shop and payments