BudgetTracker

budgettracker-1779394643286.tsx

'use client'
import { useState } from 'react'

const BUDGET = [
  { cat:'Housing', budget:1500, spent:1500, icon:'🏠', color:'#6d28d9' },
  { cat:'Food', budget:600, spent:420, icon:'🍔', color:'#f59e0b' },
  { cat:'Transport', budget:300, spent:180, icon:'🚗', color:'#2563eb' },
  { cat:'Entertainment', budget:200, spent:320, icon:'🎮', color:'#ef4444' },
  { cat:'Health', budget:150, spent:90, icon:'💊', color:'#10b981' },
]

export default function BudgetTracker({ categories = BUDGET }) {
  const totalBudget = categories.reduce((s,c)=>s+c.budget,0)
  const totalSpent = categories.reduce((s,c)=>s+c.spent,0)
  return (
    <div style={{ background:'#fff', borderRadius:'16px', padding:'20px', maxWidth:'380px', boxShadow:'0 2px 16px rgba(0,0,0,0.06)' }}>
      <div style={{ marginBottom:'20px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'6px' }}>
          <span style={{ fontWeight:700, color:'#1e293b' }}>Monthly Budget</span>
          <span style={{ fontWeight:700, color:totalSpent>totalBudget?'#ef4444':'#1e293b' }}>
            ${totalSpent} / ${totalBudget}
          </span>
        </div>
        <div style={{ height:'8px', background:'#e2e8f0', borderRadius:'4px' }}>
          <div style={{ height:'100%', borderRadius:'4px', background:totalSpent>totalBudget?'#ef4444':'linear-gradient(90deg,#6d28d9,#2563eb)', width:Math.min(totalSpent/totalBudget*100,100)+'%', transition:'width 0.5s' }}/>
        </div>
        <div style={{ fontSize:'12px', color:'#94a3b8', marginTop:'4px' }}>${totalBudget-totalSpent} remaining</div>
      </div>
      {categories.map(cat => {
        const pct = Math.min((cat.spent/cat.budget)*100,100)
        const over = cat.spent > cat.budget
        return (
          <div key={cat.cat} style={{ marginBottom:'14px' }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'5px' }}>
              <div style={{ display:'flex', alignItems:'center', gap:'8px' }}>
                <span style={{ fontSize:'18px' }}>{cat.icon}</span>
                <span style={{ fontSize:'13px', fontWeight:600, color:'#374151' }}>{cat.cat}</span>
                {over && <span style={{ fontSize:'10px', background:'#fee2e2', color:'#991b1b', padding:'1px 6px', borderRadius:'9999px', fontWeight:700 }}>Over</span>}
              </div>
              <span style={{ fontSize:'12px', fontWeight:600, color:over?'#ef4444':'#64748b' }}>${cat.spent}/${cat.budget}</span>
            </div>
            <div style={{ height:'5px', background:'#f1f5f9', borderRadius:'3px' }}>
              <div style={{ height:'100%', borderRadius:'3px', background:over?'#ef4444':cat.color, width:pct+'%', transition:'width 0.5s' }}/>
            </div>
          </div>
        )
      })}
    </div>
  )
}

Component info

CategoryFinance

Frameworkreact

TierFREE

Copies0

About

Personal budget tracker with categories, spending bars and totals

More from Finance

'use client'
import { useState, useEffect } from 'react'

const BASE_PRICES: Record<string, { price: number; change: number; cap: string; icon: string; color: string }> = {
  BTC: { price: 67420, change: 2.4, cap: '1.32T', icon: '₿', color: '#f59e0b'

CryptoTicker

Finance

'use client';
import { useState } from 'react';

export default function InvoiceCard() {
  const invoices = [
    { id: 'INV-2024', client: 'Acme Corp', amount: 4800, status: 'paid', date: 'May 15, 2026' },
    { id: 'INV-2025', client: 'Globex Inc',

InvoiceCard

Finance

'use client';
import { useState, useEffect } from 'react';

export default function CryptoPortfolio() {
  const [assets, setAssets] = useState([
    { symbol: 'BTC', name: 'Bitcoin', amount: 0.42, price: 67420, change: 2.3, color: '#f59e0b', icon: '₿

CryptoPortfolio

Finance

'use client'
import { useState } from 'react'

const STATUS_STYLES = {
  paid: { bg:'#d1fae5', color:'#065f46', label:'Paid' },
  pending: { bg:'#fef3c7', color:'#92400e', label:'Pending' },
  overdue: { bg:'#fee2e2', color:'#991b1b', label:'Overdue'

InvoiceCard

Finance