# Usage Receipt

> A thermal receipt that feeds out of a printer slot, printing each line of usage left to right with dotted leaders, then the subtotal, tax, a total that counts up, and a barcode, before it is torn off and printed again.

Source: https://ui.cortexcn.dev/docs/cortex/usage-receipt

## Installation

```bash
npx shadcn@latest add @cortexcn/usage-receipt
```

## Usage

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

```tsx
<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`                     |