WebberUI
繁體中文

Finance Dashboard

Personal finance dashboard: net worth overview, income and expense charts, budget progress, transaction list.

ProApp UIapp6 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/finance-dashboard.en.json?t=<install token>"

The whole page lands in app/templates/finance-dashboard/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Nav & Net Worth Overview

    Sidebar navigation, a top search bar and a headline net-worth card with a 12-month trend chart and three income-and-expense stat cards.

    hero
  2. 2

    Cash Flow

    An animated bar chart pitting income against spending over the last 12 months, with hover values and the year-to-date balance.

    stats
  3. 3

    Budget Progress

    Monthly budget bars for six categories, flagged with a warning label as they approach the cap.

    stats
  4. 4

    Recent Transactions

    The latest eight transactions, each with a colour-coded category tag, a timestamp and a signed amount.

    content
  5. 5

    Cards & Savings Goals

    A gradient credit-card mock-up, credit utilisation, savings-goal progress rings and this month's money insights.

    product
  6. 6

    Footer

    A dark footer with the brand introduction, product, resources and company link columns, and security certification notes.

    footer

Finance Dashboard is a React finance dashboard template: a dark personal finance interface with a net worth overview, income and expense charts, budget progress, recent transactions, cards and savings goals. It is built with Next.js App Router, Tailwind CSS and Motion; the charts are hand-written SVG with no chart library, and all numbers are sample data.

When to use it

  • Web interface for a budgeting or personal finance app
  • User dashboard for a bank, broker or fintech product
  • Product showcase for a financial management tool
  • Internal reports that need cash-flow charts and budget progress

What to change after installing

  1. Numbers come from the `STAT_CARDS`, `SPARK_DATA`, `CASHFLOW`, `BUDGETS`, `TRANSACTIONS` and `GOALS` arrays at the top of page.tsx; load them from your own API to show real data.
  2. Amounts are pre-formatted strings (for example `NT$128,400`), so add your own number and currency formatting once data is live.
  3. Line and area charts are SVG paths built by `buildLinePath` and `buildAreaPath`, and goal progress uses `ProgressRing`; add your preferred chart library if you need more chart types.
  4. Sidebar items are in `NAV_ITEMS` and footer links in `FOOTER_COLS`; colors are hex values in Tailwind classes such as `#0B0F17` and `#E6EBF4`.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →