Back to components
Transaction Ledger List React component

What is this?

A payment history list with a details view. Each row shows a category icon, the merchant, a payment line such as “→ Paid · Dining · Visa •••• 4821”, and the amount, and date headers show each day’s net total. Clicking a row slides “Transaction details” over the card with the amount, status, payment method, reference number, and receipt. Closing it brings back the list with its scroll position and tab intact. Swap the transactions and labels, then drop it into a budgeting, expenses, or banking screen.

Component

Transaction Ledger List

A payment history list with a details view. Each row shows a category icon, the merchant, a payment line such as “→ Paid · Dining · Visa •••• 4821”, and the amount, and date headers show each day’s net total. Clicking a row slides “Transaction details” over the card with the amount, status, payment method, reference number, and receipt. Closing it brings back the list with its scroll position and tab intact. Swap the transactions and labels, then drop it into a budgeting, expenses, or banking screen.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Verified
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Responsive on phone, tablet, and desktop
  • Finished React · TypeScript · Tailwind CSS · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

Version 1.0.0