Usage Receipt | Cortexcn

Installation

ProPart of Cortexcn Pro

The source for usage-receipt comes with a Cortexcn Pro license, along with every other chart and the website templates. Pick a license on the pricing page.

Buy Pro See what is in Pro

Already have a license? Open the code

Usage

import { UsageReceipt } from "@/components/usage-receipt";

<UsageReceipt
  merchant="Lumen API"
  issued="Nov 14, 2026, 2:02 PM"
  reference="INV-20461"
  items={[
    { label: "Chat tokens", detail: "184,200 in, 41,900 out", amount: 96.14 },
    { label: "Embeddings", detail: "2.1M tokens", amount: 4.2 },
    { label: "Image renders", detail: "312 at 1024px", amount: 12.48 },
  ]}
/>

The receipt adds up items, applies taxRate, and draws the barcode from reference. Use it on a pricing page to show what a month of usage costs, or in a billing screen as the last step of checkout.

Examples

Monthly hosting

A hosting bill with no tax line.

Static

With animated={false}, the whole receipt shows at once.

Behavior

When the receipt comes on screen, the paper feeds out of the slot one line at a time, every interval seconds, and each line prints from left to right. The light on the printer glows while it prints.
After the last line, the totals feed out, the total counts up, and the barcode prints. With loop, the receipt hangs for a moment, tears off, and a fresh one prints.
With reduced motion enabled, the whole receipt shows at once and nothing moves.
issued is printed as given rather than formatted from a date, so the server and the browser always print the same text.
Screen readers hear the whole receipt at once, from a caption: every line, the tax, and the total. The printing paper is hidden from them.

Props

Prop	Type	Default	Description
`items`	`UsageReceiptItem[]`	Five sample lines	The lines the receipt prints, in order
`merchant`	`string`	`"Lumen API"`	Who the receipt is from
`heading`	`string`	`"Usage receipt"`	The line under the merchant
`issued`	`string`	`"Nov 14, 2026, 2:02 PM"`	When it was issued, printed as given
`reference`	`string`	`"INV-20461"`	A reference; the barcode is drawn from it
`taxRate`	`number`	`0.08`	Tax on the subtotal; 0 leaves the line out
`footer`	`string`	`"Thanks for building with us."`	A line at the foot of the receipt
`currency`	`string`	`"USD"`	An ISO 4217 code for the amounts
`locale`	`string`	`"en-US"`	The locale amounts are written in
`interval`	`number`	`0.8`	Seconds between printed lines
`animated`	`boolean`	`true`	Print line by line when it comes on screen
`loop`	`boolean`	`true`	Tear it off and print it again while on screen
`className`	`string`	-	Extra classes on the frame

UsageReceiptItem

Prop	Type	Default	Description
`label`	`string`	-	What was used
`detail`	`string`	-	How much, on a second line
`amount`	`number`	-	What it costs, in `currency`