Haven

A dense, three-column banking workspace with stacked balance bars, a lime card rail and savings milestones. Account movements, card controls and goal allocations share a local model.

• Best forDevelopers building digital-banking interfaces, savings products and everyday account-management apps.

• Dashboard

  Inspect the stacked balance chart, income and expenses, spending limit, cost analysis and financial-health gauge. The card rail contains quick actions, contacts and recent transaction history.

• Accounts

  Compare total balance and account composition, inspect an account's activity and use demo card controls. A move-money form connects everyday accounts, savings goals and card balances.

• Transactions

  Filter the local ledger by type, account and period, search or sort rows and inspect day-grouped movements. The detail rail supports spending recategorisation and local request actions.

• Goals

  Explore savings pots, their next milestones, six-month histories and target projections. Move money into a selected goal or add a goal through a validated form.

• Everyday money in a dense banking layout

  Stacked income, spending and savings bars can switch to running-total lines. Cost analysis, spending limits and a health gauge explain how much income is retained and already assigned to goals.

• Savings milestones that update together

  Allocate money to a pot and its progress, milestone, projection, account balances and ledger movement change together. Internal transfers preserve the consolidated total rather than appearing as new income.

• A card with real local controls

  Switch debit and credit cards, freeze or unfreeze them and adjust online, contactless, cash and monthly-limit settings. The illustrated card and its state follow the selected account context.

• Account activity and a searchable ledger

  Search, sort and filter structured account movements. Inspect a transaction's details, recategorise spending or record a local request outcome with the related category totals kept in sync.

• Choreographed views and accessible controls

  Banking panels arrive in stages while balance bars, goal milestones and the illustrated card replay their own motion on each view visit. 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.

All balances, cards and people are fictional. Transfers, payments, requests, top-ups, card freezes and goal creation are browser-side simulations. No bank, payment network, aggregation service, backend or persistent storage 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.