The Receipt
Receipt-style pricing section with paper aesthetics.
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. |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.