The Receipt
Receipt-style pricing section with paper aesthetics.
Main Features of The Receipt
How to Use The Receipt in Next.js
Installation Guide for The Receipt
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
storeName | string | SaaS Market | Store name text. |
storeAddress | string | 1234 Cloud Ave, Internet City | Store address text. |
items | Array<{name: string, price: number}> | [] | Array of pricing items with name and price. |
features | string[] | [] | Array of feature strings to display. |
backgroundColor | string | #e0e0e0 | Background color (hex, rgb, or hsl). |
receiptBgColor | string | #ffffff | Receipt background color. |
receiptShadowColor | string | rgba(0,0,0,0.25) | Receipt shadow color. |
iconColor | string | #404040 | Icon color. |
titleColor | string | #171717 | Title text color. |
addressColor | string | #171717 | Address text color. |
dividerColor | string | #d4d4d4 | Divider color. |
itemNameColor | string | #171717 | Item name text color. |
itemPriceColor | string | #171717 | Item price text color. |
featureTextColor | string | #737373 | Feature text color. |
featureBorderColor | string | #d4d4d4 | Feature border color. |
buttonBorderColor | string | #000000 | Button border color. |
buttonTextColor | string | #000000 | Button text color. |
totalLabelColor | string | #171717 | Total label text color. |
totalPriceColor | string | #171717 | Total price text color. |
footerText | string | THANK YOU FOR YOUR BUSINESS | Footer text. |
footerTextColor | string | #171717 | Footer text color. |
patternColor | string | #000000 | Pattern color. |
buttonText | string | Add to Cart | Button text. |
Related Components
When to Use
Excellent for e-commerce checkouts, vintage-style boutiques, and Next.js sites that want a 'physical' paper aesthetic. Use this React component for a pricing section that looks like a printed grocery or retail receipt.
Best Practices
Maintain consistent spacing within your design system by using it on neutral, textured backgrounds. Follow React best practices by using monospaced or typewriter-style fonts. Optimize for performance by using simple CSS shadows for the paper depth.
Why This Component Matters in Modern UI Development
Receipt aesthetics provide a unique, skeuomorphic connection to real-world transactions. This production-ready UI component helpsคุณ build an interface that feels tactile and transparent, adding a layer of storytelling to the purchase process.
Frequently Asked Questions
QIs the paper edge torn?
Yes, the component uses a decorative SVG mask to create the signature 'zig-zag' torn edge at the top and bottom of the receipt.
QCan I change the store details?
The `storeName` and `storeAddress` props allow you to fully customize the branding at the top of the receipt.
QDoes it support long item lists?
The receipt scales vertically based on the number of items in the `items` array, maintaining its paper-strip aesthetic regardless of length.