Paneworth Studio
Dashboard template

Paneworth Glass Finance Dashboard

A calm, frosted-glass finance dashboard for React, ready to make your own.

Get it on Gumroad (opens in a new tab)View the live demo

Live demo

A quick walk through

Scroll through the three screens, then open the working demo right here. It uses fictional sample data.

A look inside Paneworth

Paneworth Overview screen with total balance, payment card, spending limit, income and expenses chart and recent transactionsPaneworth Overview screen with total balance, payment card, spending limit, income and expenses chart and recent transactions
Overview. Total balance, a monthly spending limit, income against expenses and recent transactions on one screen.
Paneworth Savings and Goals screen with total savings, savings trend chart, goal progress rings and recurring contributionsPaneworth Savings and Goals screen with total savings, savings trend chart, goal progress rings and recurring contributions
Savings & Goals. Goals with progress rings, a savings trend and recurring contributions you can switch on and off.
Paneworth Reports screen with date range presets, income, expenses and net cash flow, charts and a transaction tablePaneworth Reports screen with date range presets, income, expenses and net cash flow, charts and a transaction table
Reports. Pick a date range, filter by account or category, compare income and expenses, and export the view as CSV.
Try it live

Runs in your browser with sample data. Nothing is uploaded.

Themes

Light or dark, it stays calm

Light, dark or follow the device, with Sage, Ocean and Ember accents.

The Overview screen in the light theme with the Sage accent.
Light
The Overview screen in the dark theme with the Sage accent.
Dark
  • Sage accentSage
  • Ocean accentOcean
  • Ember accentEmber

About the template

Paneworth Glass Finance Dashboard is a personal finance template built with React, TypeScript, Tailwind CSS, Motion and Recharts. Soft glass panels, readable type and gentle motion give it a polished look, in light and dark themes with three accent colors.

Everything works out of the box. Add and edit transactions, fund savings goals, filter reports and export what you see. Bring in your own data from CSV, Excel, OFX and other common files, or keep the built-in demo data while you explore. Each screen reads and writes through one small data layer, so connecting your own API means changing one file, not rewriting the screens.

It suits developers building a fintech prototype, a budgeting project, a client demo or a dashboard for a product.

Features

  • Overview: balance, payment card, spending limit, income versus expenses, spending by category and recent transactions with search, filters, inline editing and delete.
  • Savings & Goals: savings trend, goal cards with progress rings, contributions and recurring contributions you can switch on and off.
  • Reports: date ranges, account and category filters, key figures, charts and a full transaction table with CSV export.
  • Themes: light, dark or follow the device, with Sage, Ocean and Ember accents.
  • Import: CSV, TSV, pasted rows, Excel, OFX/QFX and QIF, with column mapping, preview, duplicate detection and undo.
  • Data layer: browser storage by default, plus an HTTP API adapter and a small mock server.
  • Quality: keyboard and screen-reader support, reduced-motion support and a responsive layout from phone to desktop.
  • Tools: React, TypeScript, Tailwind CSS 4, Vite, Motion, Recharts and Lucide icons.

What's included

  • Full edition: all three screens with six months of fictional demo data
  • Starter edition: the same app with an empty dashboard
  • Documentation: quick start, theming, importing data, API adapter, deployment and accessibility
  • Changelog and license files
  • 12 months of free updates
Get it on Gumroad (opens in a new tab)

Demo data is fictional. The template is a user-interface starter: it gives no financial advice and does not move money.