# Invoice cards

> Invoice summary, printed receipt and payout statement cards — each with a money moment: counting totals, a print-in receipt and an optimistic mark-as-paid stamp.

- Collection: Examples
- Tier: pro
- Docs: https://geturui.com/docs/invoice-cards
- Install: `npx shadcn@latest add @geturui-pro/invoice-cards`
- Dependencies: motion, lucide-react

## Variants

### Invoice summary

Client, counting amount due, collapsible line items and totals, with an optimistic mark-as-paid that stamps the card.

Install: `npx shadcn@latest add @geturui-pro/invoice-cards-summary`

```tsx
import { InvoiceSummaryCard } from "@/components/examples/invoice-cards/summary";

export function Invoice() {
  return (
    <InvoiceSummaryCard
      number="INV-2048"
      client="Halcyon Studio"
      items={[{ description: "Design retainer", quantity: 1, unitPrice: 3200 }]}
      onMarkPaid={() => api.markPaid("INV-2048")}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| number / client / clientEmail | `string` | — | Invoice id and who it is billed to. |
| issuedOn / dueOn / paidOn | `string` | — | Display dates. |
| items | `{ description; quantity; unitPrice }[]` | — | Line items in major units. |
| taxRate | `number` | 0.08 | Tax as a fraction of the subtotal. |
| status | `"paid" | "due" | "overdue"` | "due" | Initial status. |
| currency | `string` | "USD" | ISO currency code. |
| onMarkPaid / onSendReminder | `() => void` | — | Action handlers. |

### Receipt

Paper receipt that prints in from the top, with dotted leaders, a drawn barcode and tear edge, and a download button that fills with progress.

Install: `npx shadcn@latest add @geturui-pro/invoice-cards-receipt`

```tsx
import { ReceiptCard } from "@/components/examples/invoice-cards/receipt";

export function OrderReceipt() {
  return <ReceiptCard merchant="Kiln Coffee Co." orderId="KC-48213" onDownload={() => track("receipt_pdf")} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| merchant / meta / orderId | `string` | — | Header text and the barcode value. |
| lines | `{ label; amount; quantity? }[]` | — | Purchased items. |
| tip / taxRate | `number` | 3 / 0.0875 | Added to the total. |
| paymentMethod | `string` | "Card •• 4821" | Shown next to the paid mark. |
| currency | `string` | "USD" | ISO currency code. |
| onDownload / onEmail | `() => void` | — | Download fires when the simulated progress completes. |

### Payout statement

Monthly payout with period tabs, a counting net amount and a stacked breakdown bar that highlights from its legend.

Install: `npx shadcn@latest add @geturui-pro/invoice-cards-payout`

```tsx
import { PayoutStatementCard } from "@/components/examples/invoice-cards/payout";

export function Payouts() {
  return <PayoutStatementCard destination="Northwind Bank •• 0193" onViewStatement={(p) => openStatement(p)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| periods | `PayoutPeriod[]` | — | { key, label, gross, fees, refunds, reserve, status, arrival } per tab. |
| defaultPeriod | `string` | — | Initially selected period key; defaults to the last. |
| destination | `string` | — | Bank account the payout goes to. |
| currency | `string` | "USD" | ISO currency code. |
| onViewStatement | `(period: string) => void` | — | Statement button handler. |

## Accessibility

- Statuses always pair colour with an icon and a word; amounts keep a static screen-reader value while the visible figure counts.
- Expandable line items use aria-expanded/aria-controls; the period switcher is a tablist.
- Reduced motion removes the receipt print-in, height springs and stamp spin, leaving fades.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.