Transaction List

Cards 76

About

Here is modern minimalistic Transaction List component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Transaction List to your project and fits it to your theme.

Code

How Transaction List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// This is a demo of a preview

"use client";
import React from "react";
import Component from "@/components/ui/transaction-list";
import { ArrowRight, CreditCard, X } from "lucide-react";

const dummyTransactions = [
  {
    id: "1",
    name: "Netflix",
    type: "Subscription",
    amount: -15.99,
    date: "July 1, 2024",
    time: "10:30 AM",
    icon: (
      <div className="p-2">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM6 7C6 6.44772 6.44772 6 7 6H10C10.5523 6 11 6.44772 11 7V17C11 17.5523 10.5523 18 10 18H7C6.44772 18 6 17.5523 6 17V7ZM14 7C14 6.44772 14.4477 6 15 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18H15C14.4477 18 14 17.5523 14 17V7Z"
            fill="currentColor"
          ></path>
        </svg>
      </div>
    ),
    paymentMethod: "Card",
    cardLastFour: "1234",
    cardType: "visa",
  },
  {
    id: "2",
    name: "Spotify",
    type: "Subscription",
    amount: -9.99,
    date: "July 2, 2024",
    time: "09:00 AM",
    icon: (
      <div className="p-2">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7 11C7 10.4477 7.44772 10 8 10H10C10.5523 10 11 10.4477 11 11V14C11 14.5523 10.5523 15 10 15H8C7.44772 15 7 14.5523 7 14V11ZM13 9C13 8.44772 13.4477 8 14 8H16C16.5523 8 17 8.44772 17 9V15C17 15.5523 16.5523 16 16 16H14C13.4477 16 13 15.5523 13 15V9ZM18 7C18 6.44772 18.4477 6 19 6H21C21.5523 6 22 6.44772 22 7V15C22 15.5523 21.5523 16 21 16H19C18.4477 16 18 15.5523 18 15V7Z"
            fill="currentColor"
          ></path>
        </svg>
      </div>
    ),
    paymentMethod: "Card",
    cardLastFour: "5678",
    cardType: "mastercard",
  },
  {
    id: "3",
    name: "Starbucks",
    type: "Coffee",
    amount: -5.50,
    date: "July 3, 2024",
    time: "08:15 AM",
    icon: (
      <div className="p-2">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8Z"
            fill="currentColor"
          ></path>
        </svg>
      </div>
    ),
    paymentMethod: "Card",
    cardLastFour: "9012",
    cardType: "visa",
  },
];

const DemoOne = () => {
  return (
    <div className="flex w-full h-screen justify-center items-center dark">
      <Component transactions={dummyTransactions} />
    </div>
  );
};

export default DemoOne;