Budget Card

A card displaying a monthly budget with spending, limits, and remaining balance. It includes a dropdown to select months and a details toggle. Renders visual elements like percentages and color-coded breakdowns.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/budget-card

npx layro-cli add @watermeloncorp/budget-card

npx layro-cli add @watermeloncorp/budget-card

bunx layro-cli add @watermeloncorp/budget-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import React, { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { ChevronDown, Check, X } from 'lucide-react';

interface BreakdownItem {
  label: string;
  amount: number;
  color: string;
}

interface BudgetCardProps {
  month: string;