The Finance Dashboard Kit uses Next.js App Router with a (dashboard) route group that provides the sidebar navigation and header layout for all finance pages.
Directory Overview
finance-dashboard-kit/
├── app/
│ ├── (dashboard)/ # Main finance pages
│ │ ├── layout.tsx # AppSidebar + AppHeader + CommandPalette + FabMenu
│ │ ├── dashboard/page.tsx # Financial overview dashboard
│ │ ├── transactions/page.tsx # Transaction ledger
│ │ ├── accounts/page.tsx # Connected accounts
│ │ ├── budgets/page.tsx # Category budgets
│ │ ├── bills/page.tsx # Bills & subscriptions
│ │ ├── goals/page.tsx # Savings goals
│ │ ├── reports/page.tsx # Financial reports
│ │ └── settings/page.tsx # Preferences & appearance
│ ├── page.tsx # Root redirect to /dashboard
│ ├── globals.css # Design tokens (6 themes)
│ └── layout.tsx # Root layout (fonts, ThemeProvider, SkipLink)
├── components/
│ ├── ui/ # shadcn/ui primitives (~34 components)
│ ├── a11y/ # Accessibility (live-region, visually-hidden)
│ ├── layout/ # App chrome (sidebar, header, skip-link, theme-toggle, mode-toggle, command-palette, fab-menu)
│ ├── shared/ # Shared composites (stat-card, currency-display, date-range-picker, category-chip, sparkline)
│ ├── dashboard/ # Dashboard widgets (16 components)
│ ├── transactions/ # Transaction composites (4 components)
│ ├── accounts/ # Account composites (3 components)
│ ├── budgets/ # Budget composites (3 components)
│ ├── bills/ # Bills composites (5 components)
│ ├── goals/ # Goals composites (5 components)
│ ├── reports/ # Reports composites (4 components)
│ └── settings/ # Settings composites (3 components)
├── data/
│ └── seed.ts # Mock data for all pages
├── types/
│ └── index.ts # TypeScript interfaces
├── hooks/
│ ├── use-mobile.ts # Mobile viewport detection
│ ├── use-announce.ts # Screen reader announcements
│ ├── use-focus-trap.ts # Focus trap for modals
│ ├── use-keyboard-navigation.ts # Keyboard nav support
│ └── use-reduced-motion.ts # Reduced motion preference
├── lib/
│ ├── utils.ts # cn() utility
│ ├── format.ts # Currency, percent, and number formatters
│ └── stores/
│ └── use-layout-store.ts # Zustand store for widget layout and presets
└── public/
└── images/ # Static images
Route Group
| Group |
Layout |
Purpose |
(dashboard) |
AppSidebar + AppHeader + CommandPalette + FabMenu |
All finance pages (dashboard, transactions, accounts, budgets, bills, goals, reports, settings) |
The root page.tsx redirects to /dashboard so users always land on the financial overview.
Component Organization
Primitives (components/ui/)
34 shadcn/ui components: Accordion, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Chart, Checkbox, Collapsible, Command, Dialog, DropdownMenu, Input, InputGroup, Label, Popover, Progress, RadioGroup, ScrollArea, Select, Separator, Sheet, Skeleton, Slider, Sonner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, and Tooltip.
Shared Composites (components/shared/)
| Component |
Used In |
stat-card |
Dashboard, goals, budgets (metric cards with icon, value, and trend badge) |
currency-display |
Across all pages (formatted currency with sign coloring) |
date-range-picker |
Transactions, reports (date range selection) |
category-chip |
Transactions, budgets (colored category badge with icon) |
sparkline |
Dashboard stat cards (inline mini chart) |
Dashboard Composites (components/dashboard/)
| Component |
Used In |
stats-grid |
Dashboard (primary stat cards: net worth, income, expenses, savings rate) |
income-expense-chart |
Dashboard (monthly income vs expenses BarChart) |
spending-donut |
Dashboard (category spending PieChart) |
cash-flow-chart |
Dashboard (inflow/outflow/net AreaChart) |
net-worth-chart |
Dashboard (assets, liabilities, net worth over time) |
budget-progress |
Dashboard (budget category progress bars) |
expense-heatmap |
Dashboard (daily spending heatmap calendar) |
savings-progress |
Dashboard (goal progress summary) |
asset-allocation |
Dashboard (account type distribution) |
top-merchants |
Dashboard (top spending merchants) |
recent-transactions-widget |
Dashboard (latest 10 transactions) |
bills-due-widget |
Dashboard (upcoming bill payments) |
budget-alerts-widget |
Dashboard (over-budget warnings) |
largest-expenses-widget |
Dashboard (biggest recent expenses) |
subscriptions-widget |
Dashboard (recurring subscription list) |
widget-picker |
Dashboard (toggle widget visibility) |
Transaction Composites (components/transactions/)
| Component |
Used In |
transaction-table |
Transactions page (sortable, paginated table) |
transaction-filters |
Transactions page (search, category, account, status, amount range) |
transaction-detail-sheet |
Transactions page (slide-out transaction details) |
add-transaction-dialog |
Transactions page (create new transaction form) |
Layout Components (components/layout/)
| Component |
Purpose |
app-sidebar |
Fixed sidebar with finance navigation (Dashboard, Transactions, Budgets, Accounts, Bills & Subscriptions, Goals, Reports, Settings) |
app-header |
Top bar with mobile menu trigger, command palette shortcut, breadcrumbs |
skip-link |
Accessibility skip navigation link |
theme-toggle |
Color theme selector (Mint Ledger, Midnight, Sunset, Emerald, Lavender, Slate) |
mode-toggle |
Personal/Business finance mode switch |
command-palette |
Cmd+K command palette for quick navigation |
fab-menu |
Floating action button for quick actions on mobile |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (transactions, accounts, budgets, bills, goals, categories, dashboard stats, chart data, reports, balance sheet items, etc.) |
types/index.ts |
TypeScript interfaces for all domain objects (Transaction, Account, Budget, Bill, Goal, Category, DashboardStat, WidgetConfig, PLRow, BalanceSheetItem, MonthlyReport, AppSettings, etc.) |
lib/utils.ts |
cn() class name utility |
lib/format.ts |
formatCurrency(), formatPercent(), percentChange() formatting helpers |
lib/stores/use-layout-store.ts |
Zustand store managing widget visibility, order, and layout presets (Full View, Minimalist, Business, Personal) |
app/globals.css |
Design tokens (oklch colors with teal hue 170, 6 color themes, animations, a11y utilities) |