Thermal Receipt

New

Notifications that print out as receipts you tear off

$ npx @hritik-sharmaa/repeat-ui add commons-thermal-receipt
Category
Commons
Added
Nov 2, 2026
Version
1.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview

Repeat UI

Order shipped

12:00 PM · #01040


1x Desk lamp$48.00
1x Matchbox$2.50

Total$50.50

Arrives Thursday

Ready
Customize
2
300px
70ms
import CommonsThermalReceipt from "@/components/repeat-ui/commons-thermal-receipt/preview";

<CommonsThermalReceipt
  receipts={receipts}
  onTear={tear}
  header="Repeat UI"
/>

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add commons-thermal-receipt --variant ts-tailwind
  2. Use it

    The files are in components/repeat-ui/commons-thermal-receipt/.

    import CommonsThermalReceipt from "@/components/repeat-ui/commons-thermal-receipt/preview";
    
    export default function Page() {
      return <CommonsThermalReceipt />;
    }

Props

PropTypeDefaultDescription
receiptsReceipt[]-{ id, title, meta?, lines?, total?, note? }, oldest first. lines are { label, value }.
onTear(id: string | number) => void-Called when a receipt is torn off, or the roll of older ones is tapped.
headerstring"Repeat UI"Shop name printed at the top of every receipt.
maxVisiblenumber2Receipts left hanging before the oldest curl into the roll.
widthnumber300Printer width in pixels. Shrinks to fit narrow screens.
printSpeednumber70Milliseconds to feed each printed row.
paperColorstring"#f6f3ea"Paper colour.
inkColorstring"#27241f"Print colour.
printerColorstring"#1f1f1f"Printer body colour.
accentColorstring"#22c55e"Status light colour.
showBarcodebooleantruePrint a barcode on each receipt.
classNamestring""Extra classes for the root element.

More commons

See all