KQ-688 · CREDIT/NOTE

Credit Note

A credit note beside the next invoice. Pressing Apply lifts a chip carrying the amount to be applied from the credit figure and slides it into the invoice's total on glide; when it lands the total and the credit line roll to their new values on glide and the applied share of the credit bar hatches in from the left while the remainder stays solid. Remove reverses the flight. Apply and Remove are one real button, held disabled while a chip is in flight, and a status line reports each landing.

KQ-688 · CREDIT/NOTE

Credit noteCN-0418 · Waylight Pay

Applied Carries

Next invoiceINV-2052 · Oct

Subtotal: $64.00
Credit applied: $0.00
Total due: $64.00

Applied $0.00 · invoice due $64.00

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/credit-note

Props

credit: number; default —; The credit note's full value in major units.
invoiceSubtotal: number; default —; The next invoice's amount before credit, in major units.
applied / defaultApplied: number; default 0; Controlled or initial credit already applied, clamped to the lesser of the credit and the subtotal; onAppliedChange fires from the Apply or Remove press.
format: (value: number) => string; default —; Formats every amount. Defaults to a fixed en-US currency formatter.
creditLabel / creditReference: string; default —; Title and small reference on the credit card; the title defaults to Credit note.
invoiceLabel / invoiceReference: string; default —; Title and small reference on the invoice card; the title defaults to Next invoice.
applyLabel / removeLabel: string; default —; Copy on the action button; default Apply credit and Remove credit.

Prop	Type	Default	Description
credit	number	—	The credit note's full value in major units.
invoiceSubtotal	number	—	The next invoice's amount before credit, in major units.
applied / defaultApplied	number	0	Controlled or initial credit already applied, clamped to the lesser of the credit and the subtotal; onAppliedChange fires from the Apply or Remove press.
format	(value: number) => string	—	Formats every amount. Defaults to a fixed en-US currency formatter.
creditLabel / creditReference	string	—	Title and small reference on the credit card; the title defaults to Credit note.
invoiceLabel / invoiceReference	string	—	Title and small reference on the invoice card; the title defaults to Next invoice.
applyLabel / removeLabel	string	—	Copy on the action button; default Apply credit and Remove credit.