fetaUI
GitHub

Receipt Printer

A receipt that feeds out of a slot line by line, hangs, and tears off on a pull.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/receipt-printer
Playground

Feta Coffee

Ready
Idle

Feta Coffee

Ready
Printing

Feta Coffee

Printing…
FETA COFFEE14 Oct 2026 · 08:42Order #4182

2 × Flat white9.00

1 × Almond croissant3.80

2 × Oat milk1.20

1 × Banana bread3.20

Subtotal17.20

Tax 8%1.38

Total$18.58

Thank you, come again

Hanging

Feta Coffee

Pull down to tear
FETA COFFEE14 Oct 2026 · 08:42Order #4182

2 × Flat white9.00

1 × Almond croissant3.80

2 × Oat milk1.20

1 × Banana bread3.20

Subtotal17.20

Tax 8%1.38

Total$18.58

Thank you, come again

Torn

Feta Coffee

FETA COFFEE14 Oct 2026 · 08:42Order #4182

2 × Flat white9.00

1 × Almond croissant3.80

2 × Oat milk1.20

1 × Banana bread3.20

Subtotal17.20

Tax 8%1.38

Total$18.58

Thank you, come again

Start at
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/receipt-printer

Accessibility

  • An article named after the shop, with every line as real text.
  • Status changes are announced politely.
  • Tearing also has a Button, so a drag is never required.
  • The barcode is decorative.

Motion

  • Paper feeds out at 40 ms per line, stepping one line at a time.
  • The Button loads until the last line lands.
  • A pull past 40 px tears it, and it drops and tilts on a spring.
  • With reduced motion, the receipt appears complete.

Responsive behavior

  • 300 by 606 px on Web and 358 by 608 px on Mobile.
  • Paper keeps 32 px of margin on each side.
  • Paper stays white with ink type in Dark.

Performance

  • Paper mounts only after Print. At idle the output is empty.
  • Feeding is one CSS transform in steps, 40 ms per line.
  • When still, the paper arrives complete with nothing running.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import ReceiptPrinter from @/components/fetaui/receipt-printer. Without props it shows a sample shop and order.
  • price is the line total, not the unit price: the subtotal adds prices and ignores quantity.
  • The tax and total are computed for display only. Do not treat them as your order's real total.
  • The barcode is drawn and cannot be scanned. frozen is for docs. Composes Button.
/docs/components/receipt-printer/markdown
PreviousPage Flip
NextActivity Terrain

Related

Currency TransferComponentA money transfer and its steps: recipient, amount, and a timeline that ticks in sequence.Invoice RowComponentReceipt tile, invoice number and date, plan, amount, status Badge and a download action.Boarding PassComponentA flight pass as an inset card over a stub. The Badge stamps a new status and the field that changed sits in a chip.CheckoutComponentExpress pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.Order TrackingComponentStage and ETA, a five stage track, a timeline of updates, the items and the address.