Receipt Card React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ReceiptCard from "./ReceiptCard";

export default function Example() {
  return (
    <ReceiptCard
      title={"OBJECTS / STUDIO"}
      subtitle={"Small editions, considered details"}
      items={[
        {
          "id": "vase",
          "label": "Ceramic study",
          "detail": "Sand / edition 04",
          "value": "£48.00"
        },
        {
          "id": "print",
          "label": "Form print",
          "detail": "Uncoated paper / A3",
          "value": "£24.00"
        },
        {
          "id": "delivery",
          "label": "Delivery",
          "value": "£4.00"
        }
      ]}
      totalLabel={"TOTAL"}
      total={"£76.00"}
      footer={"Thank you for supporting\nindependent design."}
      color={"#373029"}
      paperColor={"#e9dfce"}
    />
  );
}

Using Receipt Card

Provide labels and formatted values through items. Calculate totals and format currencies in your application, then pass total and totalLabel for display.

Use detail for secondary information below an item label. The torn edge is drawn with CSS and does not require a texture image or external asset.

Props

Name	Type	Required	Default	Description
title	ReactNode	No	undefined	Receipt heading.
subtitle	ReactNode	No	undefined	Optional text below the heading.
items	Array<{ id?, label, detail?, value }>	No	[]	Display rows with caller-formatted values.
totalLabel	ReactNode	No	undefined	Label for the final row.
total	ReactNode	No	undefined	Caller-formatted total; the component does not calculate amounts.
footer	ReactNode	No	undefined	Optional footer content.
color	string	No	"#373029"	Ink colour.
paperColor	string	No	"#e9dfce"	Receipt surface colour.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.