## Receipt Card (S—252)

A paper-style receipt: items, tax and a tip you can change after the fact, a torn edge, and share or download actions.

- URL: https://sundaeui.dev/components/receipt-card
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/receipt-card.json`
- Tags: payment, order, tip, receipt, summary, invoice

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.

### Usage

```tsx
import { ReceiptCard } from '@/components/sundae/receipt-card'

<ReceiptCard />
```

### Props

- `items` (`{ name: string; qty: number; price: number }[]`, required): Lines.
- `tax` (`number`, default `8`): Tax percent.
- `tip` (`number`, default `18`): Tip percent.
- `merchant` (`string`): Header.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Order confirmations, restaurant apps, expense detail views.

### When not to use

- Legal tax invoices: use a proper invoice layout.

### 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.