KQ-929 · RECEIPT/CARD

Receipt Card

A paid receipt folded into one line of a thread. Pressing it unrolls the paper: the body's height is measured through a callback ref and glides open on glide while the item lines arrive from 4px up in a cascade, and the total lands last and rolls its digits up from zero on snap. Enter and Space fold and unfold it, Escape folds it from anywhere inside and returns focus to the summary control, and the torn bottom edge is drawn from integer teeth sized by its container.

KQ-929 · RECEIPT/CARD

Rui Baptista · 16:41Paid for the depot run.

Folded · paid · $238.40

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/receipt-card

Props

merchant: string; default —; Who was paid; it heads the summary and names the card.
date: string; default —; A preformatted date. The card never reads a clock.
method: string; default "Waylight Pay"; How it was paid, in words, printed beside the date.
reference: string; default —; A reference code printed under the total.
lines: ReceiptLine[]; default —; The item lines as { id, label, qty?, amount }, printed in order and summed into the total.
extras: ReceiptLine[]; default []; Service, delivery and the like, printed under a dashed rule and summed with the rest.
open / defaultOpen: boolean; default false; Controlled or initial fold state.
onOpenChange: (open: boolean) => void; default —; Fires from the summary control and from Escape, with the next state.
format: (value: number) => string; default Intl.NumberFormat("en-US"); Money formatter for every figure; amounts are rounded to cents before they are summed or spoken.
paidLabel: string; default "Paid"; The chip's word, which says the state in words rather than in a colour.
totalLabel: string; default "Total"; The total row's word.
label: string; default —; Names the receipt for assistive technology; falls back to a sentence naming the merchant.
className: string; default —; Extra classes on the card.

Prop	Type	Default	Description
merchant	string	—	Who was paid; it heads the summary and names the card.
date	string	—	A preformatted date. The card never reads a clock.
method	string	"Waylight Pay"	How it was paid, in words, printed beside the date.
reference	string	—	A reference code printed under the total.
lines	ReceiptLine[]	—	The item lines as { id, label, qty?, amount }, printed in order and summed into the total.
extras	ReceiptLine[]	[]	Service, delivery and the like, printed under a dashed rule and summed with the rest.
open / defaultOpen	boolean	false	Controlled or initial fold state.
onOpenChange	(open: boolean) => void	—	Fires from the summary control and from Escape, with the next state.
format	(value: number) => string	Intl.NumberFormat("en-US")	Money formatter for every figure; amounts are rounded to cents before they are summed or spoken.
paidLabel	string	"Paid"	The chip's word, which says the state in words rather than in a colour.
totalLabel	string	"Total"	The total row's word.
label	string	—	Names the receipt for assistive technology; falls back to a sentence naming the merchant.
className	string	—	Extra classes on the card.