Invoice Page

An invoice view with sender and recipient, line items, computed totals, a rubber-stamp status, download, send and record-payment actions, and print-friendly styles.

Overdue

Pebble

Invoice

INV-2026-011

From

Pebble

14 Rua das Flores

1200-195 Lisbon

billing@pebble.example

Bill to

Pebble Design

Attn: Priya Nair

22 Mill Lane, Leeds

accounts@pebble.example

Issued: Oct 3, 2026
Due: Nov 2, 2026
Balance: $228.80

Line items
Description	Qty	Price	Amount
Team plan8 seats · Oct 1 – Oct 31	8	$12.00	$96.00
Automation runsOverage, 1,200 runs	1	$18.00	$18.00
Onboarding workshop2 hours, remote	2	$90.00	$180.00

Pay by bank transfer to the account on file, or by card from your billing page. Questions? billing@pebble.example

Subtotal: $294.00
Discount: −$20.00
VAT (20%): $54.80
Total: $328.80
Paid: −$100.00
Balance due: $228.80

Install

Pro source requires Pebble Pro. Try the full preview above.

Props

Prop	Type	Default	Description
number	string	—	Invoice number.
issued / due	string	—	Display dates.
from / to	{ name, lines, email? }	—	Sender and recipient blocks.
lines	{ id, description, detail?, quantity, unitPrice }[]	—	Line items; amounts are computed.
taxRate	number	0	Tax as a share, e.g. 0.2.
taxLabel	string	"Tax"	Tax row label, e.g. VAT.
discount	number	0	Subtracted before tax.
paid	number	0	Already paid; balance = total − paid.
defaultStatus	"draft" \| "due" \| "overdue" \| "paid"	"due"	Status stamp; flips to Paid when a payment clears the balance.
currency	string	"USD"	ISO currency code.
notes	ReactNode	—	Notes beside the totals.
brand	ReactNode	—	Mark above the title.
onDownload	() => void	window.print()	Download action; the page has print styles.
onSend	() => Promise<void> \| void	—	Send action; shows Sent when done.
onRecordPayment	(amount) => Promise<void> \| void	—	Record a payment from the dialog after validation.

Pro component

Try the full preview above. Editable source and build guides require Pebble Pro.

Buy Pebble Pro — $49 How source access works ↗

Description

Qty

Price

Amount

Team plan8 seats · Oct 1 – Oct 31

$12.00

$96.00

Automation runsOverage, 1,200 runs

$18.00

Onboarding workshop2 hours, remote

$90.00

$180.00

Props

Prop	Type	Default	Description
number	string	—	Invoice number.
issued / due	string	—	Display dates.
from / to	{ name, lines, email? }	—	Sender and recipient blocks.
lines	{ id, description, detail?, quantity, unitPrice }[]	—	Line items; amounts are computed.
taxRate	number	0	Tax as a share, e.g. 0.2.
taxLabel	string	"Tax"	Tax row label, e.g. VAT.
discount	number	0	Subtracted before tax.
paid	number	0	Already paid; balance = total − paid.
defaultStatus	"draft" \| "due" \| "overdue" \| "paid"	"due"	Status stamp; flips to Paid when a payment clears the balance.
currency	string	"USD"	ISO currency code.
notes	ReactNode	—	Notes beside the totals.
brand	ReactNode	—	Mark above the title.
onDownload	() => void	window.print()	Download action; the page has print styles.
onSend	() => Promise<void> \| void	—	Send action; shows Sent when done.
onRecordPayment	(amount) => Promise<void> \| void	—	Record a payment from the dialog after validation.

Preview

From

Bill to

Install

Props

Pro component

Preview

From

Bill to

Install

Props

Pro component