Transaction List
Blocks & SlicesA dashboard transaction-list block: colour-seeded initial discs, mono reference ids, tabular-nums amounts (negative red-ish / positive green-ish), and dotted completed/pending/failed status chips. Rows stagger-fade-in on mount with a spring and raise their background on hover; under reduced motion the stagger is dropped, rows render instantly, and the pending dot stops pulsing.
Inspired by Watermelon UI — Transaction List — independently built, not affiliated. Attribution policy
Transactions
7Installation
npx shadcn@latest add https://parable-three.vercel.app/r/transaction-list.jsonRuns the shadcn CLI — the component source is copied intocomponents/parable/transaction-list.tsx. You own it from there.
Usage
The exact code rendering the preview above.
<div className="w-full max-w-md px-4"><TransactionList onRowClick={() => {}} /></div>Props
TransactionListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
| Prop | Type | Default | Description |
|---|---|---|---|
| title | React.ReactNode | "Transactions" | Heading shown in the block header. |
| transactions | Transaction[] | DEFAULT_TRANSACTIONS | Rows to render. Defaults to a realistic 7-row sample set. |
| currency | string | "USD" | Fallback ISO 4217 code when a row omits its own. |
| onRowClick | (transaction: Transaction) => void | — | Called with the transaction when a row is activated (makes rows buttons). |
npm dependencies
- motion