Receipt Card

Beste Studio

INV-2026-0142 * Jul 02

Landing page$1,900

Brand refresh$2,400

Rush delivery$350

Total$4,650

* Thank you, see you again *

INV-2026-0142

About this component

A thermal receipt card with itemized dotted rows, a torn zigzag edge, and a barcode for pricing recaps.

Usage

The import and the props worth knowing about, in one place.

import { Card14 } from "@/components/beste/component/card14";

<Card14
  store="Beste Studio"
  meta="INV-2026-0142 * Jul 02"
  items={[
    { label: "Landing page", value: "$1,900" },
    { label: "Brand refresh", value: "$2,400" },
  ]}
  total="$4,300"
  note="* Thank you, see you again *"
  code="INV-2026-0142"   // seeds the barcode; omit to hide it
/>

<Card14
  store="Order summary"
  items={[{ label: "Pro plan", value: "$19" }]}
  total="$19"
  totalLabel="Due today"
  tone="primary"    // accents: "ink" (default) | "primary"
  tilted={false}    // disable the paper rotation
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`store`*	`string`	—	Store or studio name, printed at the top
`meta`	`string`	—	Muted line under the store name (e.g. an invoice number or date)
`items`*	`Card14Item[]`	—	Itemized rows
`total`*	`string`	—	Total row value
`totalLabel`	`string`	—	Total row label (defaults to "Total")
`note`	`string`	—	Centered footer note
`code`	`string`	—	Seeds the barcode at the bottom; omit to hide it
`tone`	`"ink" \| "primary"`	—	Accent on the store name and total
`tilted`	`boolean`	—	Slight paper rotation (defaults to on)
`className`	`string`	—	Additional classes merged onto the root