shadcn.io is not affiliated with official shadcn/ui
Receipt Skeleton Block for React Aria
A paper receipt that loads in place: the Order, Date, Subtotal and Total labels stay while bars become a stall name, five items, totals, a card line and a barcode, with a real Print button.
Installation
Overview
Show a receipt while it loads, then print it, with this receipt skeleton for React with React Aria. A narrow hairline frame with a plus mark on each corner holds a paper receipt in dashed-ruled bands from Trochee, a market-stall point of sale. The Order, Date and Cashier labels, the Subtotal, Tax and Total labels and the "Paid with" label are real from the first paint; the stall's name and place, the order values, five item lines, the amounts, the card line ("Visa ending 4242" with a Vi tile) and a drawn barcode are Skeleton bars that become the data in the same cell, line by line, when you press Load. The amounts are worked out from the lines in whole cents. Print receipt is a real Button: it opens the browser's print dialog. It's built from Skeleton, Button and Guides, with a CSS entrance only. For receipts, order confirmations and any narrow document that waits for a query.
FAQ
What stays local, and how do I wire it to a real order?
Nothing is fetched. The five lines are typed in LINES, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real data when it arrives. The bars are derived from the same data as the content, so keep one component for both. Print receipt is real, but it prints the whole page: give your own page a print stylesheet that hides everything but the receipt, or print from a dedicated receipt route.
What does Print receipt do?
It calls window.print(), which opens the browser's print dialog, once the receipt is loaded; while it loads the button is marked disabled and a press does nothing. The polite line says the dialog was opened.
How are the totals worked out?
Every amount is an integer number of cents in the typed data and is worked out from the lines in code (the subtotal sums price times quantity, the tax is eight percent of it rounded to the cent, and the total adds them), so the amounts always add up and no rounding drifts. They are written only by one usd helper that turns cents into dollars for display, as $48.00. A price is one left-to-right span so it keeps its shape in right-to-left languages.
How is the barcode drawn?
As a single SVG of filled bars from a typed list of widths, stretched to its box, in a left-to-right wrapper so it never mirrors. It is decoration (a title names it) and the number under it carries the same order number as the data. Replace it with a barcode your scanner can read.
Does the receipt keep its height while it loads?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. Every row is one line of monospaced text and the barcode has a fixed box. The frame, the labels and the buttons are real in both phases, and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the receipt…", and the polite line announces what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant.