FAQ

General

What is the SaaS Metrics Kit?

A production-ready Next.js template with 25 screens for building SaaS analytics dashboards. It includes revenue analytics, churn analysis, cohort retention heatmaps, conversion funnels, revenue forecasting, unit economics, industry benchmarks, subscription management, customer management, invoices, integrations, alerts, reports, settings, team management, and auth screens -- all built with Tailwind CSS v4 and shadcn/ui. It is a frontend UI kit, not a hosted analytics platform.

What tech stack does it use?

Next.js 16, React 19, Tailwind CSS v4 with oklch tokens, shadcn/ui components, TypeScript, Recharts for analytics charts (10+ chart types including area, bar, line, pie, composed, and funnel), date-fns for date formatting, next-themes for dark mode, Lucide React for icons, and Sonner for toast notifications.

How many chart types are included?

The kit includes 10+ chart types via Recharts: area charts (MRR trend), line charts (revenue history, retention curves, customer count), bar charts (grouped, stacked, horizontal, waterfall), pie/donut charts (churn reasons, customer segments, plan distribution), composed charts (forecasting with area bands + lines), and custom funnel visualizations (conversion funnel). There is also a cohort retention heatmap built with color-coded table cells.

Is a backend included?

No. The kit is frontend-only. All pages use mock data from data/seed.ts representing a B2B SaaS doing approximately $127K MRR with 1,284 customers. Replace with API calls, a billing provider, or database queries when building your product.

What does the mock data represent?

The seed data models a realistic B2B SaaS business with four pricing tiers (Starter, Growth, Enterprise, Custom), 12 months of revenue history, cohort retention data, churn reasons, customer health scores, subscription lifecycle events, invoices, alerts, integrations, and team members.

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.

Technical

Can I connect this to Stripe or Chargebee?

Yes. Replace the seed data imports in your page components with API calls to Stripe, Chargebee, Paddle, or any billing provider. The component interfaces accept standard props (customer name, MRR, plan, status), so you map your billing schema to the existing types. See the Customization guide for integration examples with Stripe, Chargebee, and Paddle.

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 add internationalization (i18n)?

Not out of the box. The template uses English strings. To add i18n, integrate next-intl or react-i18next and replace hardcoded strings with translation keys.

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.

How does dark mode work?

The kit uses next-themes for theme switching with class-based dark mode. All design tokens have light and dark mode values defined using oklch color functions in globals.css. Use the ThemeToggle component in the header to switch themes. Every screen, chart, and component adapts automatically.

Can I use this with a different charting library?

The kit uses Recharts for all analytics charts. If you prefer a different library (e.g., Chart.js, Nivo, Visx), you can replace the chart components in each page. The data shapes in data/seed.ts are standard arrays of objects and will work with most charting libraries.

How do I customize the cohort retention heatmap colors?

The heatmap colors are defined in the getRetentionColor function within app/(dashboard)/retention/page.tsx. Modify the thresholds and Tailwind classes to change the color scheme:

function getRetentionColor(value: number): string {
  if (value >= 90) return "bg-green-600/80 text-white"
  if (value >= 75) return "bg-green-500/60 text-white"
  if (value >= 65) return "bg-yellow-500/60 text-foreground"
  if (value >= 50) return "bg-orange-500/60 text-white"
  return "bg-red-500/60 text-white"
}

How do the forecast assumption sliders work?

The forecasting page displays Slider components for each assumption (growth rate, churn rate, expansion rate). In the seed data version, these are display-only. To make them interactive, add state management that recalculates the forecast data when slider values change, then pass the updated data to the ComposedChart.

Are the alert rules functional?

The alert rules have working Switch toggles that enable/disable rules and trigger toast notifications. The active alerts table displays mock triggered alerts. To make alerts functional, connect them to a monitoring backend (e.g., cron jobs checking metrics against thresholds, webhook integrations with Slack or email).

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.