Installation

This guide walks you through setting up the Finance Dashboard Kit from scratch.

System Requirements

• Node.js 18.17 or later
• pnpm (recommended), npm, or yarn
• Git for cloning the repository

Step 1 -- Clone the Repository

Use the private repository URL from your purchase confirmation email:

git clone <your-repo-url> finance-dashboard-kit
cd finance-dashboard-kit

Step 2 -- Install Dependencies

pnpm install

This installs Next.js 16, React 19, Tailwind CSS v4, shadcn/ui components, Recharts, Zustand, date-fns, and all utility libraries.

Key Dependencies

Package	Purpose
next 16.x	React framework
react 19.x	UI library
tailwindcss 4.x	CSS framework with oklch tokens
@base-ui/react	Accessible UI primitives (shadcn/ui v4)
recharts 3.x	Dashboard and reporting charts
zustand 5.x	State management (widget layout, theme)
date-fns 4.x	Date formatting and utilities
react-day-picker 9.x	Calendar and date picker
lucide-react	Icons
next-themes	Dark mode
cmdk	Command palette (Cmd+K)
framer-motion 12.x	Animations and transitions
sonner	Toast notifications
react-number-format	Currency input formatting

Step 3 -- Start the Dev Server

pnpm dev

Visit http://localhost:3000 to see the finance dashboard.

Step 4 -- Verify the Setup

Navigate through key pages to confirm everything works:

• / -- Redirects to the dashboard
• /dashboard -- Financial overview with stat cards, charts, and customizable widgets
• /transactions -- Transaction ledger with filters, search, and detail sheets
• /accounts -- Connected accounts with net worth hero card
• /budgets -- Category budgets with progress tracking
• /bills -- Bills timeline and subscription grid
• /goals -- Savings goals with progress rings and contribution tracking
• /reports -- Financial reports (P&L, balance sheet, monthly overview)
• /settings -- General preferences, appearance themes, and data export

Available Scripts

Command	Description
pnpm dev	Start dev server
pnpm build	Create production build
pnpm start	Run production server
pnpm lint	Run ESLint checks

Integrating into an Existing Project

1. Copy components/ into your project (ui, layout, dashboard, transactions, accounts, budgets, bills, goals, reports, settings, shared, a11y directories)
2. Copy data/seed.ts and types/index.ts
3. Copy lib/ including format.ts, utils.ts, and stores/
4. Copy design tokens from app/globals.css
5. Install the required dependencies from package.json
6. Wire up seed data to your actual banking API, accounting software, or database

Note: All pages use seed data from data/seed.ts. Replace with your own data source (API, database, banking platform) when integrating.

Troubleshooting

Port 3000 already in use:

pnpm dev --port 3001

TypeScript errors after installation:

npx tsc --noEmit

Check that tsconfig.json path aliases match your project structure.

shadcn/ui component issues:

The Finance Dashboard Kit uses shadcn/ui v4 with @base-ui/react (not Radix). Components use the render prop pattern instead of asChild. See the shadcn/ui v4 docs for details.

Zustand store not persisting:

The widget layout store uses Zustand with in-memory state by default. If you need persistence, wrap the store with persist middleware and configure a storage adapter.