Getting Started with Finance Dashboard Kit
Last updated on 2026-04-05
The Finance Dashboard Kit is a production-ready Next.js template for building a complete personal and business finance dashboard. It includes 9 screens covering a financial overview dashboard, transaction ledger, account management, budgets, bills and subscriptions, savings goals, financial reports, and settings -- all built with Tailwind CSS v4 and shadcn/ui.
What's Included
- 60+ UI components -- shadcn/ui primitives, finance composites, dashboard widgets, chart components, and layout components
- 9 pages -- dashboard, transactions, accounts, budgets, bills, goals, reports, settings, and a root redirect
- 1 route group --
(dashboard)for the main finance app with sidebar navigation - Light & dark mode -- oklch design tokens with teal theme (hue 170) plus 5 built-in color themes
- Dual-mode -- Personal and Business finance modes with layout presets
- Customizable dashboard -- widget picker with 4 layout presets (Full View, Minimalist, Business, Personal)
Prerequisites
- Node.js 18.17 or later
- pnpm (recommended) or npm
- A code editor -- VS Code recommended
Quick Start
# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> finance-dashboard-kit
cd finance-dashboard-kit
# 2. Install dependencies
pnpm install
# 3. Start the dev server
pnpm dev
Open http://localhost:3000 to browse the finance dashboard.
Kit Overview
| Area | Screens | Key Features |
|---|---|---|
| Dashboard | 1 | Stat cards with sparklines, income/expense chart, spending donut, cash flow timeline, net worth chart, expense heatmap, budget progress, savings progress, asset allocation, top merchants, recent transactions, bills due, budget alerts, largest expenses, subscriptions widget, widget picker with layout presets |
| Transactions | 1 | Sortable table, search, category/account/status filters, amount range, add transaction dialog, transaction detail sheet |
| Accounts | 1 | Net worth hero card, account list grouped by type (checking, savings, credit, investment, loan, cash), add account dialog |
| Budgets | 1 | Summary cards (total budget, total spent, remaining), budget cards with progress bars, monthly history charts, add budget dialog |
| Bills | 1 | Tabbed view (upcoming bills timeline, subscriptions grid), annual projection chart, auto-pay status, add bill dialog |
| Goals | 1 | Stats row (total saved, monthly contributions, active goals), goal cards with progress rings, contribution modal, goal detail sheet, create goal dialog |
| Reports | 1 | Tabbed reports (overview with monthly summary cards, profit & loss table, balance sheet table), period selector |
| Settings | 1 | Tabbed settings (general preferences, appearance with theme switcher, data & export) |
| Root | 1 | Redirects to /dashboard |
Tech Stack
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router |
| React 19 | UI library |
| Tailwind CSS v4 | Utility-first styling with oklch tokens |
| shadcn/ui v4 | Component primitives (@base-ui/react) |
| Recharts 3 | Dashboard and reporting charts |
| date-fns | Date formatting and utilities |
| Lucide React | Icon library |
| next-themes | Dark mode support |
| Zustand | State management for widget layout and theme |
| sonner | Toast notifications |
| framer-motion | Animations and transitions |
| cmdk | Command palette |
Next Steps
- Installation -- detailed setup and configuration
- Project Structure -- understand the directory layout
- Design Tokens -- oklch color system and theming
- Accessibility -- WCAG AA compliance and keyboard support