DemoBuy

Getting Started with SaaS Metrics Kit

Last updated on 2026-05-31

The SaaS Metrics Kit is a production-ready Next.js template for building subscription analytics dashboards. It includes 25 screens covering revenue analytics, churn analysis, cohort retention, forecasting, subscription management, and team settings — all built with Tailwind CSS v4 and shadcn/ui.

What's Included

  • 30+ UI components — primitives, analytics composites, shared composites, and layout components
  • 25 pages — analytics, management, settings, auth, and utility pages
  • 2 route groups — (dashboard) and (auth) with dedicated layouts
  • Light & dark mode — oklch design tokens with automatic theme switching
  • 10+ chart types — area, bar, line, pie, composed, funnel, heatmap via Recharts

Prerequisites

  • Node.js 18.17 or later
  • pnpm (recommended) or npm
  • A code editor — VS Code recommended

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> saas-metrics-kit
cd saas-metrics-kit

# 2. Install dependencies
pnpm install

# 3. Start the dev server
pnpm dev

Open http://localhost:3000 to browse the dashboard.

Kit Overview

Area Screens Key Features
Analytics 10 Dashboard, revenue, customers, churn, retention, growth, unit economics, forecasting, funnel, benchmarks
Management 8 Customer list/detail, subscriptions, invoices, plans, alerts, reports, integrations
Settings 3 General, team, profile
Auth 3 Login, register, forgot password
Utility 1 404 page

Tech Stack

Technology Purpose
Next.js 16 React framework with App Router
React 19 UI library
Tailwind CSS v4 Utility-first styling with oklch tokens
shadcn/ui Component primitives
Recharts Dashboard charts (10+ types)
Lucide React Icon library
next-themes Dark mode support
Sonner Toast notifications
date-fns Date formatting

Next Steps

Next

Installation