Budget Tracker Dashboard React Component | Framer Motion + Glassmorphism | Editable UX Design
A stunning glassmorphism budget dashboard built in React with Framer Motion animated progress bars, live transaction management, and a dark navy + glass aesthetic that looks straight out of a $500/month SaaS product — at a fraction of the cost.UX Design precision: every element follows data dashboard best practices. Fira Code monospace font for all financial figures (instantly scannable), color-coded income vs expense indicators, animated budget bars that fill on mount with a 650ms ease-out transition, and an AnimatePresence-powered transaction list that animates items in and out individually as you add or delete them.Glassmorphism implementation uses backdrop-filter: blur(18px) with carefully tuned rgba backgrounds and border opacities that remain legible in both light and dark environments. Summary cards display balance, income, and expenses with icon indicators styled at 60fps.Fully editable: CATEGORIES and INITIAL_TX arrays at the top of the file — change labels, budgets, colors, and amounts without touching any component logic.What you get:- Single JSX file, self-contained- Glassmorphism card system with backdrop-filter- Framer Motion animated progress bars (mount animation)- AnimatePresence transaction add/remove with layout animation- Inline add-transaction form with keyboard support (Enter to save)- Responsive two-column grid (collapses to single on mobile)- prefers-reduced-motion compliant
Get it → kimyager.gumroad.com