FAQ

General

What is the Sales Dashboard Kit?

A production-ready Next.js template with 9 screens for building a sales performance dashboard. It includes a revenue dashboard, visual pipeline board, deal management, quota targets, team leaderboard, analytics reports, settings, and auth screens -- all built with Tailwind CSS v4 and shadcn/ui. It is a frontend UI kit, not a hosted sales platform.

How many screens are included?

Nine screens: Dashboard (root), Pipeline, Deals, Targets, Leaderboard, Reports, Settings, Login, and Register. The dashboard group uses a shared sidebar and header layout, while the auth pages use a centered card layout.

What tech stack does it use?

Next.js 16, React 19, Tailwind CSS v4 with oklch tokens, shadcn/ui v4 components, TypeScript, Recharts 3 for analytics charts, date-fns for date formatting, Lucide React for icons, and next-themes for dark mode.

Is a backend included?

No. The kit is frontend-only. All pages use mock data from data/seed.ts. Replace with API calls, a CRM backend, or database queries when building your product. See the Customization guide for integration examples with Salesforce, HubSpot, and Supabase.

Technical

Can I connect this to Salesforce or HubSpot?

Yes. Replace the seed data imports in your page components with API calls to Salesforce, HubSpot, or any CRM backend. The component interfaces accept standard props (deal name, value, stage, owner), so you map your CRM schema to the existing types. The Customization guide includes code examples for both Salesforce REST API and HubSpot API integration.

Is the pipeline board customizable?

Yes. Pipeline stages are defined as data in data/seed.ts. Add, remove, or reorder stages by editing the pipelineStages array. The pipeline board, deal list stage badges, conversion funnel, and reports all dynamically render from this array, so changes propagate automatically across all screens.

Is the kit accessible?

Yes. The Sales Dashboard Kit meets WCAG AA standards. It includes a skip-to-content link, visible focus indicators, keyboard navigation for the pipeline board and data tables, proper ARIA labels, semantic HTML landmarks, live regions for dynamic updates, and reduced motion support. See the Accessibility guide for full details.

How do I change the color theme?

Update the oklch hue value in app/globals.css. The default theme uses hue 250. Change it to your brand color (e.g., 160 for teal, 270 for indigo, 330 for pink) and all 9 screens adapt automatically -- buttons, badges, charts, progress bars, sidebar, and focus rings all update at once. See the Design Tokens guide for details.

Does it work with existing Next.js projects?

Yes. Copy components/, data/, and types/ directories into your project. Install dependencies and import the design tokens from globals.css. See the Installation guide for details.

Can I use npm instead of pnpm?

Yes. All three package managers work. The kit ships with a pnpm-lock.yaml but you can use npm install or yarn install instead.

How do I add new shadcn/ui components?

The kit is compatible with the shadcn/ui CLI:

npx shadcn@latest add <component-name>

Components install to components/ui/ and integrate seamlessly with the existing design tokens.

Licensing

What license types are available?

Each purchase includes a license for either Solo (1 developer), Team (up to 5 developers), or Agency (unlimited developers + client delivery). See the product page for pricing details.

Can I use this for client projects?

With the Agency license, yes -- you can use the kit in unlimited client projects. The Solo and Team licenses are for your own products only.

Can I resell this template?

No. The license permits use in end products but does not allow redistribution or resale of the template itself, whether modified or unmodified.

Support

How do I get support?

Email support@thefrontkit.com or visit the Support page.

What's the refund policy?

7-day money-back guarantee, no questions asked.

How do I report bugs?

Email the details to support@thefrontkit.com with steps to reproduce, browser version, and screenshots if applicable. We will address it in the next update.