FAQ

What screens are included?

9 screens total: a customizable financial overview dashboard with stat cards, income/expense charts, 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 widgets with 4 layout presets and a widget picker; a transaction ledger with sortable table, search, category/account/status/amount filters, transaction detail sheet, and add transaction dialog; an accounts page with net worth hero card, account list grouped by type (checking, savings, credit, investment, loan, cash), and add account dialog; a budgets page with summary cards, category budget cards with progress bars and monthly history, and add budget dialog; a bills and subscriptions page with tabbed upcoming bills timeline, subscription grid, annual projection chart, and add bill dialog; a savings goals page with stats row, goal cards with progress rings, goal detail sheet, contribution modal, and create goal dialog; a financial reports page with tabbed overview (monthly summary cards), profit & loss table, and balance sheet table; a settings page with tabbed general preferences, appearance theme switcher (6 themes), and data export; and a root page that redirects to the dashboard.

Does this include backend or API logic?

No. This is a frontend UI kit. All screens use mock seed data with transactions, accounts, budgets, bills, goals, categories, chart data, and financial reports. You connect your own backend, API, or database. The UI layer handles display, interaction, and form structure.

Can I connect this to a real banking API?

Yes. All screens consume typed TypeScript interfaces. Replace the seed data imports with API calls to Plaid, Stripe, Teller, or any REST/GraphQL endpoint. The Transaction, Account, Budget, Bill, and Goal interfaces in types/index.ts define the expected data shapes. See the Customization guide for integration examples with Plaid, Supabase, and Prisma.

What chart library does this use?

Recharts 3. The kit includes 8+ chart components: income vs expense bar chart, spending category donut, cash flow area chart, net worth trend line, expense heatmap calendar, annual bill projection chart, budget progress bars, and savings goal progress rings. All charts use the --chart-1 through --chart-5 CSS tokens for consistent theming across all 6 color themes.

Is the UI accessible?

Yes. All screens use semantic HTML, keyboard navigation, proper ARIA labels, focus management, and WCAG AA contrast ratios in both light and dark modes across all 6 color themes. Five custom accessibility hooks are included (use-announce, use-focus-trap, use-keyboard-navigation, use-reduced-motion, use-mobile). A skip link is present on every page. The prefers-reduced-motion media query disables all animations. See the Accessibility guide.

Can I customize the colors and theme?

Absolutely. The kit ships with 6 built-in color themes (Mint Ledger, Midnight, Sunset, Emerald, Lavender, Slate), each with full light and dark mode support. The entire color system uses oklch tokens in globals.css. Change the hue value and all 9 screens update instantly. You can also create custom themes by adding new CSS class definitions. Users can switch themes in real-time via the settings page. See the Design Tokens guide.

What is the difference between Personal and Business mode?

The Finance Dashboard Kit supports dual-mode operation. The Personal mode emphasizes budgets, savings goals, and personal spending categories. The Business mode focuses on profit & loss, cash flow, top merchants, and business-oriented metrics. Users can switch modes from the sidebar, and the dashboard layout presets adjust widget visibility accordingly.

Can I add new dashboard widgets?

Yes. The dashboard uses a widget visibility system powered by a Zustand store. Create a new component in components/dashboard/, register its ID in the layout store, and add it to the dashboard page with a visibility check. You can also define custom layout presets that include your new widget. See the Customization guide for step-by-step instructions.

What license covers client work?

Solo and Team licenses are for internal projects. The Agency license allows unlimited developers and client delivery.

How do I add new pages?

Create a new file in app/(dashboard)/your-page/page.tsx. It automatically inherits the dashboard layout (sidebar, header, command palette, floating action button). Add a navigation link in components/layout/app-sidebar.tsx. See the Customization guide for details.

Can I use this with a different CSS framework?

The kit is built specifically for Tailwind CSS v4 with oklch design tokens. While you could extract the component logic, the styling is deeply integrated with Tailwind utilities. We recommend keeping Tailwind for the best experience.