Bestseller
DashboardsBestseller
Ledger
A polished finance and portfolio dashboard for fintech.
4.8(173)1,210 salesUpdated Jun 3, 2026
$99one-time
- Instant download after purchase
- Full source code in TypeScript
- Free lifetime updates
Overview
Ledger is a multi-page finance template covering balances, portfolio performance, spending breakdowns, transaction history, and yield. It is the fastest way to stand up a fintech or personal-finance product front end that already feels trustworthy.
It includes a balance KPI strip, an interactive portfolio chart, holdings and allocation cards, a filterable transactions table, and an Earn view for staking and yield. Built on Next.js 16, React 19, and HeroUI with carefully themed Recharts visualizations.
Key features
Portfolio performance chart
Smooth, themed area chart with range selectors and a custom tooltip.
Spending insights
Category breakdown and month-over-month comparison cards built from typed data.
Transactions table
Filterable, paginated history with status chips and merchant avatars.
Allocation visualization
Donut allocation card and holdings list that stay in sync with your data.
Trust-first visual language
Calm, dense, and precise. The kind of UI finance users expect.
What is included
- Dashboard (balance, portfolio chart, activity)
- Portfolio (holdings + allocation)
- Spending (category breakdown)
- Transactions (filterable history)
- Earn (staking + yield)
- Settings
- Help
Tech stack
Next.js 16React 19TypeScriptTailwind CSS v4HeroUIRechartsGravity UI Icons
Setup
After downloading and unzipping, run:
pnpm install pnpm dev
The download includes src/, README.md, INSTALLATION.md, LICENSE.md, CHANGELOG.md, package.json, next.config.ts, tsconfig.json. Full step-by-step instructions are in INSTALLATION.md.
Compatibility
- Next.js 15 and 16
- React 19
- Node.js 18.18+
- Tailwind CSS v4
- All modern browsers
Changelog
v1.0.10Jun 3, 2026
- Next.js 16 and React 19 upgrade
- New Earn (yield) view
- Refined portfolio chart tooltip
v1.0.5Mar 30, 2026
- Added transaction filters
- Improved mobile layout for holdings
v1.0.0Feb 2, 2026
- Initial release
Frequently asked questions
No. Ledger ships with realistic mock data. Connect Plaid, a brokerage API, or your own backend by editing the typed data files.
Yes. Charts are Recharts components themed via design tokens, so colors and ranges are simple to adjust.
Yes. The Earn and Portfolio views include staking and token-allocation patterns suited to crypto products.
More to explore