## Invoice List (S—184)

Billing history rows with Paid / Due / Failed status, a Pay now that runs inline, and a PDF download per invoice.

- URL: https://sundaeui.dev/components/invoice-list
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/invoice-list.json`
- Tags: download, saas, invoices, payments, history, billing

Each row has the period, amount and a status label. Due and failed invoices get a Pay now button that shows a spinner, then flips the row to Paid with a tick.
Download shows a brief progress state. The header totals what is outstanding.

### Usage

```tsx
import { InvoiceList } from '@/components/sundae/invoice-list'

<InvoiceList />
```

### Props

- `invoices` (`{ id: string; period: string; amount: number; status: "paid" | "due" | "failed" }[]`, required): Invoices; amount in cents.
- `onPay` (`(id: string) => Promise<boolean>`): Pay an invoice.
- `onDownload` (`(id: string) => void`): Download handler.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Billing settings, customer portals.

### When not to use

- Accounting exports: use a data table.

### Accessibility

- Status is text, not only styling; actions are labelled with the invoice period.
- Payment results are announced.
- Reduced motion removes the movement and keeps every state change.