Financial Goal Card

Cards

About

Financial Goal Card A comprehensive card component to display the progress of a financial goal. It includes a progress summary, an image, investment details, and a list of recent transactions. The component is animated using framer-motion for a dynamic user experience.

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

Code

How Financial Goal Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import { FinancialGoalCard } from "@/components/ui/financial-goal-card";
import { TrendingUp, DollarSign, Repeat, PiggyBank } from "lucide-react"; // Icons for demo

// --- MOCK DATA ---
const sampleGoal = {
  goalName: "Buy a house",
  targetDate: "June 2029",
  currentAmount: 182495,
  targetAmount: 250000,
  imageUrl: "https://cdn.21st.dev/assets/mirror/ae/ae64467558d7d241d602921ef078ba6d512ad3c687eb915c884999562a510d07.jpg", // A placeholder image
  investmentInfo: {
    icon: TrendingUp,
    name: "Auto-invested in VMFXX",
    yield: "Earning 4.23% yield",
  },
  transactions: [
    { id: '1', icon: DollarSign, type: 'One-time deposit', date: 'Yesterday', amount: 1350 },
    { id: '2', icon: PiggyBank, type: 'Interest payout', date: 'June 18', amount: 148.95 },
    { id: '3', icon: Repeat, type: 'Regular deposit', date: 'June 1', amount: 1000 },
    { id: '4', icon: Repeat, type: 'Regular deposit', date: 'May 2', amount: 1000 },
    { id: '5', icon: PiggyBank, type: 'Interest payout', date: 'April 15', amount: 128.57 },
  ],
};

// --- DEMO COMPONENT ---
const FinancialGoalCardDemo = () => {
  return (
    <div className="flex items-center justify-center min-h-screen bg-background p-4">
      <FinancialGoalCard
        goalName={sampleGoal.goalName}
        targetDate={sampleGoal.targetDate}
        currentAmount={sampleGoal.currentAmount}
        targetAmount={sampleGoal.targetAmount}
        imageUrl={sampleGoal.imageUrl}
        investmentInfo={sampleGoal.investmentInfo}
        transactions={sampleGoal.transactions}
      />
    </div>
  );
};

export default FinancialGoalCardDemo;