An on-screen thermal receipt at real 80 mm or 58 mm width that feeds out of a printer slot and prints only itself with the matching page size.
Corner Kitchen
214 Bedford Ave, Brooklyn, NY 11249
(718) 555-0199
Order
#1048
DateNov 5, 2026 · 7:42 PM
TypeDelivery
CustomerMaya Thompson
Phone(347) 555-0123
Address88 N 6th St, Apt 4B
ItemAmount
2xSmash Double$23.00
Medium well
Add bacon +2.00
No onions
1xCrinkle Fries$4.25
Large
1xVanilla Shake$5.75
2xGarlic Aioli$1.50
Subtotal$34.50
Delivery fee$3.50
Coupon WELCOME5-$5.00
Total$33.00
PaymentCard on delivery
Bring the card machine
Scan to track your order
Thank you! See you soon.
npx shadcn@latest add https://hyperblur.dev/r/receipt-80mm.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/receipt-80mm.tsx.
import { Receipt80mm } from "@/components/hyperblur/receipt-80mm"
<Receipt80mm orderNumber={2051} items={[{ name: "Smash Double", quantity: 2, price: 11.5 }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| storeName | string | "Corner Kitchen" | Name at the top of the receipt. |
| storeLines | string[] | address and phone | Lines under the store name. |
| orderNumber | string | number | 1048 | Order number printed large. |
| date | string | "Nov 5, 2026 · 7:42 PM" | Preformatted date and time. |
| type | string | "Delivery" | Order type line. |
| customer | { name: string; phone?: string; address?: string } | null | Maya Thompson | Customer block. Null hides it. |
| items | { name: string; price: number; quantity?: number; options?: string[]; note?: string }[] | 4 items | Lines with unit price. Options and the note print indented under the item. |
| adjustments | { label: string; amount: number }[] | delivery fee and coupon | Lines between subtotal and total. Use negative amounts for discounts. |
| total | number | Total to print. Defaults to the subtotal plus adjustments. | |
| payment | string | "Card on delivery" | Payment method line. |
| paymentNote | string | "Bring the card machine" | Bold line under the payment method. |
| note | string | "Ring twice, side door on 6th St." | Boxed order note. |
| footer | string | "Thank you! See you soon." | Closing line. |
| qrValue | string | Seed for the decorative code block. Defaults to the store name and order number. | |
| showQr | boolean | true | Shows the code block. |
| paper | "80mm" | "58mm" | "80mm" | Paper width on screen and in print. |
| currency | string | "USD" | ISO currency code passed to Intl.NumberFormat. |
| locale | string | "en-US" | Locale used to format money. |
| labels | Partial<ReceiptLabels> | English | Every visible caption, such as print, subtotal, total, payment, note and scan. |
| showToolbar | boolean | true | Shows the paper chip and the Print button. |
| showPrinter | boolean | true | Shows the printer slot above the paper. |
| animateIn | boolean | true | Feeds the paper out of the slot on mount. |
| onPrint | () => void | Called right before the print dialog opens. | |
| accent | string | "#2f7bff" | Accent color used for buttons, focus rings and highlights. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |