Morrow

A personal-budget interface with forest-green money-flow bars, lime spending envelopes and savings projections. Purchases, budget allocations and goal transfers share one local ledger.

• Best forDevelopers building personal-finance apps, budgeting tools and consumer-fintech dashboards.

• Overview

  Inspect balance and income, a monthly spending gauge, twelve months of money-flow bars and the remaining Needs, Lifestyle and Learning envelopes. Hover or focus a month for its breakdown.

• Transactions

  Search and filter the monthly ledger, inspect day-grouped movements and categorise imported purchases. A purchase detail previews the effect on its budget envelope before assignment.

• Budgets

  Compare spending pace with the monthly limit, inspect projections and move allocation between the buffer and each envelope in controlled steps.

• Goals

  Explore savings targets, their projections and estimated completion dates. Validate a local transfer to a selected goal and follow its progress back into the ledger.

• A cash-flow chart tied to the ledger

  Twelve months of income and spending use the same transaction model as the ledger. Rounded bars, forecast hatching and attached tooltips make each month's composition inspectable.

• Categorisation with a visible budget effect

  Assign an imported purchase and the expense total, envelope usage, remaining budget, chart cap and notification update together. A real local Undo restores the previous state.

• Envelope allocation and spending pace

  Editable limits and allocation steppers move money between the buffer and budget envelopes. Cumulative spending, a projection and the safe daily amount follow the selected month.

• Savings goals without double-counting spending

  A validated goal transfer changes the pot, projection and ledger while keeping total balance and spending unchanged. Goals include target amounts, progress and estimated completion dates.

• Choreographed views and accessible controls

  Financial cards reassemble in stages, money-flow bars grow and savings projections redraw on each view visit. Existing pointer, keyboard and touch feedback stays local to its control. Phone layouts, keyboard navigation and initial or late reduced-motion preferences are supported; state stays shared across all four views.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Fictional deterministic data runs in browser memory. Categorisation, allocations, savings transfers and notifications are local simulations; no bank, payment, aggregation service, backend or persistence is connected. Reload or Reset restores the seed.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide icons
• FontsFigtree
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.