Card

Cards 95

About

Weekly Expense Card This component provides a visually engaging summary of expenses. It features an animated bubble chart powered by framer-motion and uses shadcn/ui components and theme variables for a consistent look and feel.

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

Code

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

Usage.tsx

import {
  WeeklyExpenseCard,
  ExpenseItem,
} from "@/components/ui/card-20";

// Sample data for the expense card demo
const expenseData: ExpenseItem[] = [
  {
    category: "Grocery",
    percentage: 48,
    amount: 758.2,
    color: "221.2 83.2% 53.3%", // Blue
  },
  {
    category: "Food & Drink",
    percentage: 32,
    amount: 512.6,
    color: "142.1 76.2% 36.3%", // Green
  },
  {
    category: "Shopping",
    percentage: 13,
    amount: 205.45,
    color: "346.8 77.2% 49.8%", // Pink
  },
  {
    category: "Transportation",
    percentage: 7,
    amount: 110.8,
    color: "35.8 91.7% 54.5%", // Orange
  },
];

const WeeklyExpenseCardDemo = () => {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
      <WeeklyExpenseCard
        title="Weekly Expense"
        dateRange="From 1 - 6 Apr, 2024"
        data={expenseData}
        onButtonClick={() => alert("View Report Clicked!")}
      />
    </div>
  );
};

export default WeeklyExpenseCardDemo;