Transactions grouped under sticky day headings, with merchant tiles, status chips, tabular amounts and an expandable detail row with a copy button.
npx shadcn@latest add https://hyperblur.dev/r/transaction-list.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/transaction-list.tsx.
import { TransactionList } from "@/components/hyperblur/transaction-list"
<TransactionList maxHeight={320} defaultExpanded="t2" />| Prop | Type | Default | Description |
|---|---|---|---|
| transactions | { id: string; day: string; merchant: string; category: string; time: string; amount: number; status?: "pending" | "posted"; reference?: string; account?: string }[] | defaultTransactions | Transactions in display order. Rows with the same day are grouped under one heading. Negative amounts are spending, positive amounts are income. |
| currency | string | "USD" | ISO currency code used to format amounts. |
| maxHeight | number | 360 | Height in pixels at which the list starts to scroll. |
| surface | string | "#111111" | Background color of the sticky day headings. Match it to the surface behind the list. |
| accent | string | "#2f7bff" | Accent color for focus rings and the expanded row. |
| defaultExpanded | string | Id of a transaction whose detail row starts open. | |
| onCopy | (transaction: Transaction) => void | Called after a reference id is copied. |