Receipt Card
A paper-style receipt: items, tax and a tip you can change after the fact, a torn edge, and share or download actions.
receipt-card.tsxreceipt-card.css
Checking access…
Overview
Lines and totals are typeset like a till receipt with dotted leaders. Changing the tip percentage recomputes the total in place.
The bottom edge is a zig-zag tear drawn with inline SVG, not an image. Share copies a plain-text version.
When to use
- Order confirmations, restaurant apps, expense detail views.
When not to use
- Legal tax invoices: use a proper invoice layout.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/receipt-card.json$
npx shadcn@latest add https://sundaeui.dev/r/receipt-card.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/receipt-card.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/receipt-card.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy receipt-card.tsx and receipt-card.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ReceiptCard } from '@/components/sundae/receipt-card'
<ReceiptCard />Props
| Prop | Type | Default |
|---|---|---|
items*Lines. | { name: string; qty: number; price: number }[] | — |
taxTax percent. | number | 8 |
tipTip percent. | number | 18 |
merchantHeader. | string | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The receipt is a table with a caption; totals are in a description list.
- Tip choices are a radiogroup; the new total is announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-rct; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Receipt Card free?
- Receipt Card is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Receipt Card?
- Run npx shadcn@latest add https://sundaeui.dev/r/receipt-card.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Receipt Card support keyboard and screen readers?
- The receipt is a table with a caption; totals are in a description list. Tip choices are a radiogroup; the new total is announced.
- Does Receipt Card respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Tender Checkout
Checkout · Refined - Pro
Tip Selector
Checkout · Refined - Pro
Payment Methods
Checkout · Refined - Pro
Return Request
Checkout · Refined - Pro
Seat Checkout
Checkout · Understated - Pro
Currency Swap
Checkout · Refined