Changelog

Last updated on 2026-04-05

v1.0.0 -- April 5, 2026

Initial release of the Finance Dashboard Kit.

Screens (9 total)

  • Customizable dashboard with 16 widgets: 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, and subscriptions
  • Dashboard layout presets (Full View, Minimalist, Business, Personal) with widget picker
  • Transaction ledger with sortable table, search, category/account/status/amount filters, detail sheet, and add dialog
  • Accounts page with net worth hero card, account list grouped by type, and add account dialog
  • Budgets page with summary cards, category budget cards with progress bars and monthly history, and add budget dialog
  • Bills & Subscriptions page with tabbed upcoming bills timeline, subscription grid, annual projection chart, and add bill dialog
  • Savings Goals page with stats row, goal cards with progress rings, goal detail sheet, contribution modal, and create goal dialog
  • Financial Reports page with tabbed overview (monthly summary cards), profit & loss table, and balance sheet table with period selectors
  • Settings page with tabbed general preferences, appearance theme switcher, and data & export section
  • Root page redirecting to dashboard

Features

  • 6 built-in color themes (Mint Ledger, Midnight, Sunset, Emerald, Lavender, Slate) with full light and dark mode
  • Dual-mode operation (Personal and Business finance)
  • Command palette (Cmd+K) for quick navigation
  • Floating action button for mobile quick actions
  • Tabular number formatting for financial figures
  • CSS animations with staggered entrance effects
  • Zustand-powered widget layout persistence

Tech Stack

  • Next.js 16 with App Router
  • React 19
  • Tailwind CSS v4 with oklch design tokens (teal hue 170)
  • shadcn/ui v4 with @base-ui/react
  • Recharts 3 for charts
  • Zustand 5 for state management
  • 5 accessibility hooks
  • Light & dark mode via next-themes
  • Framer Motion for transitions