Card

Cards 100

About

Spending Limit Card A responsive card component that displays a spending limit with an animated, segmented progress bar.

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 { SpendingLimitCard } from "@/components/ui/card-8";

/**
 * A demo component showcasing how to pass custom color classes
 * to the SpendingLimitCard.
 */
const SpendingLimitCardDemo = () => {
  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-8 bg-background p-4 md:flex-row md:items-start">
      
      {/* Example 1: Using default colors (no color props passed) */}
      <SpendingLimitCard
        title="Groceries Budget"
        dateRange="Data from 1-17 Sep, 2025"
        buttonText="View Report"
        currentSpending={252.98}
        limit={1200}
        // Define any valid Tailwind classes here
        filledColorClass="bg-green-500"
        unfilledColorClass="bg-green-500/20"
        onButtonClick={() => alert("Custom color card report clicked!")}
      />

    </div>
  );
};

export default SpendingLimitCardDemo;