Finance Dashboard

A complete personal finance screen - balance KPI cards, a full-width cash-flow sankey from income sources to spending, spending-by-category rings, portfolio risk vs. return bubbles, a daily spending heatmap, and a transactions data table. Fully responsive, down to a slide-in drawer on mobile.

Finance

Total balance

₹2,83,700+3.2%

Income

₹2,11,720+6.1%

Expenses

₹12,250+2.4%

Invested

₹32,400+8.4%

Cash flow

Provided data

IncomeSpending

Cash flow: illustrative source-shaped fixture data
Category	Value
Salary → Housing	₹2,600
Salary → Groceries	₹1,200
Salary → Transport	₹600
Freelance → Subscriptions	₹500
Freelance → Dining	₹900
Salary → Investing	₹4,500
Freelance → Investing	₹1,200
Dividends → Investing	₹900
Salary → Savings	₹3,500
Freelance → Savings	₹1,200
Dividends → Savings	₹1,320

Spending by category

Provided data

+2.4%

Spending by category: illustrative source-shaped fixture data
Category	Value
Housing	₹2,600
Groceries	₹1,200
Transport	₹600
Subscriptions	₹500
Dining	₹900

Portfolio

Provided data

+6.2%

ReturnRisk score

Stocks · avg8%Funds · avg3%Crypto · avg12%

Portfolio: illustrative source-shaped fixture data
Category	Value
Stocks A	5%
Stocks B	6%
Stocks C	9%
Stocks D	11%
Funds A	2%
Funds B	3%
Funds C	4%
Funds D	4.3%
Crypto A	14.8%
Crypto B	10%

Daily spending

Daily spending period

₹3,690

W1W2W3W4W5W6W7W8W9W10W11W12

Total results20 transactions

Account

Transaction category

Transaction amount

Search records

Example finance transactions
Select visible rows		Account	Category
Select Fresh market	Fresh market	Account for Fresh market	Groceries	Jan 03, 2026	-₹1,350
Select Music subscription	Music subscription	Account for Music subscription	Subscriptions	Feb 04, 2026	-₹120
Select Example Corp payroll	Example Corp payroll	Account for Example Corp payroll	Income	Mar 05, 2026	+₹62,000
Select Cloud storage	Cloud storage	Account for Cloud storage	Subscriptions	Apr 06, 2026	-₹300
Select Electricity utility	Electricity utility	Account for Electricity utility	Utilities	May 07, 2026	-₹910
Select Studio invoice	Studio invoice	Account for Studio invoice	Income	Jun 08, 2026	+₹12,860
Select Transport pass	Transport pass	Account for Transport pass	Transport	Jul 09, 2026	-₹760
Select Design tools	Design tools	Account for Design tools	Subscriptions	Aug 10, 2026	-₹1,800
Select Fresh market	Fresh market	Account for Fresh market	Groceries	Sep 11, 2026	-₹1,350
Select Music subscription	Music subscription	Account for Music subscription	Subscriptions	Oct 12, 2026	-₹120

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {BoardTemplate} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <BoardTemplate id="finance" embedded/>;}

What's included

The template ships as a complete source package: the responsive app shell, balance KPI stat cards, the cash-flow sankey, the spending-by-category rings, the portfolio scatter with bubble sizing, the daily spending heatmap, the transactions data table (search, filters, sorting, pagination), and every base component and data file they depend on.

Advanced playground, API and recovery states ↗

Loading Helios UI…

Finance Dashboard