Receipt Printer

A thermal printer that feeds a real-looking receipt out of its slot, line by line.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Animated · Full motion: idle animation, physics and effects. animated (default)

The receipt prints in stepper-motor jerks with a blinking LED and a buzzing body, then shows dotted leaders, totals, a barcode generated from your order code and a torn zig-zag edge.

Installation

$ npx shadcn@latest add https://guetix.com/r/receipt-printer.json

Uses the shadcn CLI. It creates components/guetix/receipt-printer.tsx and installs nothing else.

Usage

example.tsx

"use client";

import ReceiptPrinter from "@/components/guetix/receipt-printer";

export default function ReceiptPrinterDemo({ variant = "animated" }: { variant?: string }) {
  return (
    <ReceiptPrinter animated={variant !== "regular"}
      title="GUETIX DINER"
      meta="ORDER #0427 · TABLE 7"
      items={[
        { name: "Flat white", qty: 2, price: 3.5 },
        { name: "Bug-free code", price: 0 },
        { name: "Midnight deploy", price: 12 },
        { name: "Rubber duck", price: 4.25 },
      ]}
      taxRate={0.1}
      code="GX0427"
    />
  );
}

Checkout successInvoicesBuild / deploy summariesYear-in-review

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01Feed speed has random stalls between lines, the way a real stepper motor sounds.
02Dotted leaders are a flex spacer with a dotted bottom border, so the prices stay aligned at any width.
03The barcode is derived from an FNV hash of the code, so it is stable and unique.

Props

Prop	Type	Default	Description
items	{ name: string; qty?: number; price: number }[]	—	Line items.
title / meta / footer	string	—	Header and footer text.
currency	string	"$"	Currency prefix.
taxRate	number	0.1	0.2 = 20 %.
code	string	"GX0427"	Barcode seed.
autoPrint	boolean	true	Print on mount.
onPrinted	() => void	—	Fired when done.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

The full receipt is in the DOM; print status is announced via `role="status"`.
Reduced motion: printed instantly.

Receipt Printer

A thermal printer that feeds a real-looking receipt out of its slot, line by line.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Open in v0

Animated · Full motion: idle animation, physics and effects. animated (default)

The receipt prints in stepper-motor jerks with a blinking LED and a buzzing body, then shows dotted leaders, totals, a barcode generated from your order code and a torn zig-zag edge.

Installation

$ npx shadcn@latest add https://guetix.com/r/receipt-printer.json

Uses the shadcn CLI. It creates components/guetix/receipt-printer.tsx and installs nothing else.

Usage

example.tsx

"use client";

import ReceiptPrinter from "@/components/guetix/receipt-printer";

export default function ReceiptPrinterDemo({ variant = "animated" }: { variant?: string }) {
  return (
    <ReceiptPrinter animated={variant !== "regular"}
      title="GUETIX DINER"
      meta="ORDER #0427 · TABLE 7"
      items={[
        { name: "Flat white", qty: 2, price: 3.5 },
        { name: "Bug-free code", price: 0 },
        { name: "Midnight deploy", price: 12 },
        { name: "Rubber duck", price: 4.25 },
      ]}
      taxRate={0.1}
      code="GX0427"
    />
  );
}

Checkout successInvoicesBuild / deploy summariesYear-in-review

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01Feed speed has random stalls between lines, the way a real stepper motor sounds.
02Dotted leaders are a flex spacer with a dotted bottom border, so the prices stay aligned at any width.
03The barcode is derived from an FNV hash of the code, so it is stable and unique.

Props

Prop	Type	Default	Description
items	{ name: string; qty?: number; price: number }[]	—	Line items.
title / meta / footer	string	—	Header and footer text.
currency	string	"$"	Currency prefix.
taxRate	number	0.1	0.2 = 20 %.
code	string	"GX0427"	Barcode seed.
autoPrint	boolean	true	Print on mount.
onPrinted	() => void	—	Fired when done.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

The full receipt is in the DOM; print status is announced via `role="status"`.
Reduced motion: printed instantly.

Receipt Printer

Preview

Receipt Printer

Preview