FAQ

What screens are included?

27 screens total: a dashboard overview with net worth and cash flow; accounts list and account detail; cards and card detail; investments and holding detail; transactions with transaction detail and recurring payments; transfers and saved recipients; budgets and budget detail; savings goals and goal detail; analytics with net worth trends and a monthly review; a help center; 4 settings pages (general, integrations, notifications, security); and 3 auth pages (login, register, forgot password).

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 27 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.