## Transaction List (S—127)

Bank-style transactions grouped by day with daily totals; tap a row to expand details, filter In / Out at the top.

- URL: https://sundaeui.dev/components/transaction-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/transaction-list.json`
- Tags: list, banking, transactions, expand, finance, fintech

Rows group under sticky day headers that show the day’s net. Tapping a row expands it in place to show category, card and a receipt action, and only one row is open at a time.
An All / In / Out filter animates the list down to matching rows.

### Usage

```tsx
import { TransactionList } from '@/components/sundae/transaction-list'

<TransactionList />
```

### Props

- `items` (`{ id: string; name: string; amount: number; date: string; category: string; method?: string }[]`, required): Transactions; amount in cents, negative for spend.
- `currency` (`string`, default `'USD'`): ISO currency.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Banking, wallets, expense tools, payouts.

### When not to use

- Large ledgers: use a data table with sorting.

### Accessibility

- Rows are disclosure buttons with aria-expanded; details are linked with aria-controls.
- The filter is a radiogroup.
- Reduced motion removes the movement and keeps every state change.