Receipt

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add receipt

Usage#

import {
  Receipt,
  ReceiptFooter,
  ReceiptHeader,
  ReceiptRow,
  ReceiptTitle,
} from "@/components/ui/receipt"

export function Example() {
  return (
    <Receipt>
      <ReceiptHeader>
        <ReceiptTitle>Parking Ticket</ReceiptTitle>
      </ReceiptHeader>
      <ReceiptRow label="Plate:">8KTR204</ReceiptRow>
      <ReceiptRow label="Paid until:">16:30</ReceiptRow>
      <ReceiptFooter>City of Bayview</ReceiptFooter>
    </Receipt>
  )
}

Anatomy#

Every part is optional but the paper, and they print in the order you write them. The header and the footer bring their own strong rule; a ReceiptRule that would double one of them, or lands at either end of the slip, folds away.

import {
  Receipt,
  ReceiptFigure,
  ReceiptFooter,
  ReceiptHeader,
  ReceiptNote,
  ReceiptRow,
  ReceiptRule,
  ReceiptStamp,
  ReceiptSubtitle,
  ReceiptTitle,
} from "@/components/ui/receipt"

<Receipt size="md" edge="bottom">
  {/* The heading, ruled off underneath */}
  <ReceiptHeader>
    <ReceiptTitle />
    <ReceiptSubtitle />
  </ReceiptHeader>

  {/* The body: rows, rules, a figure, a verdict */}
  <ReceiptRow label="Label:">Value</ReceiptRow>
  <ReceiptRule />
  <ReceiptFigure caption="Result" unit="Unit">0.00</ReceiptFigure>
  <ReceiptStamp tone="success" />
  <ReceiptNote />

  {/* The brand line, ruled off above */}
  <ReceiptFooter />
</Receipt>

Fingerprint record#

A code reads better a step smaller than a reading: size="md" on the figure. A long value, like this one, breaks anywhere rather than running off the paper.

Shop receipt#

Line items are rows too: a long item name wraps inside its own share of the line and the price keeps the right edge. A total is a row set larger, with a class. Torn at both ends, the slip reads as cut from the roll.

Sizes#

md (the default, 20rem) is the ticket a dialog shows. sm (14rem) is the stub a handheld device feeds out, printed a step smaller. Its rows can run inline, the value straight after the label, with layout="inline"; a tone on a row prints its value bold in that ink.

Edges#

edge picks the torn ends: bottom (the default, the slip as it leaves the printer), top, both (cut from the roll) or none. The teeth have a fixed size, --receipt-tooth (2em), and a whole number of them fits any width. The torn side keeps its copy clear of them.

Tones#

ReceiptStamp, ReceiptFigure and ReceiptRow take a tone: default (the ink), success, warning, destructive and info. On the paper they are the light theme's -strong inks, legible on cream in any theme; the stamp adds the soft tint and edge of a Badge. Pick the tone by what the verdict means, not by its word: a positive breath test is destructive.

In a dialog#

To show a printed ticket on its own, strip the dialog to nothing and let the slip float on the scrim: the content goes transparent, unpadded and as wide as the receipt. The title stays for screen readers, and a white button under the slip closes it.

Print face#

Koala has no dot-matrix face, so the receipt prints in the mono token, font-mono. Every size inside it is in em of the receipt's own font size, so a face is swapped, and resized, on the root alone. A pixel face such as VT323 has small glyphs for its size: set it one step up, text-base on md and text-sm on sm. Name the family with font-[family-name:…] so it replaces font-mono instead of sitting beside it. The width stays in rem.

Re-tinting#

The receipt scopes itself .light.cream, so its ground and inks are the cream theme's on any page, and keeps its own roles on top of them. Set one on the root to re-tint a slip: --receipt-paper, --receipt-ink, --receipt-muted, --receipt-faint, --receipt-rule, --receipt-rule-strong, and --receipt-tooth for the size of the teeth.

Old engines#

Receipt holds in old embedded Chromium too, the kind a desktop or game shell ships (Chromium 10x): no container queries, no :has() and no standalone translate or scale. The torn edge is a mask written both prefixed and unprefixed (the unprefixed mask only arrived in Chromium 120), made of conic gradients, which Chromium has drawn since 69. To slide a ticket out of a device, move the root with [transform:translateY(…)] rather than translate-y-*, which compiles to the standalone translate property.

API reference#

FAQ#