SaaS Dashboard Docs

A modern, animated, fully-responsive SaaS analytics dashboard built with Next.js 16, React 19, and Tailwind CSS v4.

✨ Features

Revenue Overview

Stacked area chart with 12-month revenue breakdown by source (subscriptions, one-time, ads).

Stat Cards

4 key metrics (MRR, Active Users, Churn Rate, ARPU) with trend indicators and hover effects.

Analytics Page

Weekly active users comparison chart and conversion funnel visualization.

Customer Table

Searchable customer data table with plan/status badges and formatted revenue.

Subscription Plans

Plan breakdown bar chart with revenue per tier (Free, Pro, Enterprise).

Dark/Light Mode

Persistent theme toggle with smooth transitions and OS preference detection.

Responsive Design

Mobile navigation drawer, responsive grids, and touch-friendly interactions.

Animations

Smooth hover transitions, loading skeletons, and micro-interactions throughout.

Authentication

Secure sign-in/sign-up with Clerk. Supports email/password, Google OAuth, and session management out of the box.

🛠 Tech Stack

Technology	Purpose
Next.js 16	React framework with App Router & Server Components
React 19	UI library with Server Components
Tailwind CSS v4	Utility-first CSS framework
TypeScript	Type safety & developer experience
Recharts	Composable charting library
Lucide React	Clean, consistent icon library
Framer Motion	Animation library (ready for enhancements)
Clerk	Authentication (sign-in, sign-up, session management, Google OAuth)
date-fns	Date formatting utilities
shadcn/ui	Design system primitives (adapted)

🔌 Integration Guide

Add this dashboard to any existing Next.js project in 5 simple steps.

Install Dependencies

Run this command in your project root:

npm install recharts lucide-react framer-motion date-fns class-variance-authority clsx tailwind-merge @radix-ui/react-slot tailwindcss-animate

Copy the Files

Copy these folders into your project:

components/     # UI + Dashboard + Shared components
lib/            # Types, utilities, mock data
hooks/          # Custom React hooks
app/dashboard/            # Dashboard pages (protected)

Configure Tailwind CSS

Ensure your app/globals.css has these Tailwind directives:

@import "tailwindcss";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

:root { --background: #ffffff; --foreground: #171717; }
.dark { --background: #0a0a0a; --foreground: #ededed; }

body {
  background: var(--background);
  color: var(--foreground);
  font-synthesis: none;
}

Replace Mock Data

Edit lib/data.ts to replace mock data generators with your real API calls:

// Example: Replace mock data with your API
export async function getStatCards(): Promise<StatCardData[]> {
  const res = await fetch("/api/dashboard/stats")
  return res.json()
}

Add Authentication (Optional)

The dashboard uses Clerk for authentication. To enable it:

Sign up at clerk.com and create an application
Copy your Publishable Key and Secret Key
Create a .env.local file with both keys

# .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_your_key
CLERK_SECRET_KEY=sk_your_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

Alternatively, remove the middleware.ts, ClerkProvider from layout.tsx, and Clerk imports from components to use the dashboard without auth.

🎨 Customization Tips

Colors

Edit the indigo-* utility classes throughout the components to match your brand colors. The primary accent is indigo.

Charts

All chart colors are defined inline in the component files. Search for hex codes like #6366f1 to customize.

Pages

Add new pages by creating files in app/dashboard/. Update the sidebar navigation links in components/dashboard/sidebar.tsx.

Auth Provider

The dashboard uses Clerk by default. To switch to another provider, update middleware.ts and app/layout.tsx. Sign-in/up pages are in app/(auth)/.

📁 File Structure

sass-dashboard/
├── app/
│   ├── (dashboard)/           # Dashboard route group
│   │   ├── layout.tsx         # Dashboard shell (sidebar + header)
│   │   ├── page.tsx           # Overview page
│   │   ├── loading.tsx        # Loading skeleton
│   │   ├── analytics/         # Analytics page
│   │   ├── customers/         # Customers page
│   │   ├── subscriptions/     # Subscriptions page
│   │   └── settings/          # Settings page
│   ├── docs/                  # Documentation page
│   ├── layout.tsx             # Root layout (fonts, metadata)
│   ├── page.tsx               # Landing page
│   └── globals.css            # Global styles & Tailwind
├── components/
│   ├── ui/                    # Primitive components
│   │   ├── avatar.tsx
│   │   ├── badge.tsx
│   │   ├── button.tsx
│   │   └── card.tsx
│   ├── dashboard/             # Dashboard-specific widgets
│   │   ├── sidebar.tsx
│   │   ├── header.tsx
│   │   ├── stat-card.tsx
│   │   ├── revenue-chart.tsx
│   │   ├── recent-activity.tsx
│   │   ├── customer-table.tsx
│   │   ├── subscription-overview.tsx
│   │   ├── analytics-charts.tsx
│   │   └── settings-form.tsx
│   ├── shared/                # Shared components
│   │   ├── theme-toggle.tsx
│   │   ├── mobile-nav.tsx
│   │   └── loading-skeleton.tsx
│   └── landing/               # Landing page components
├── lib/                       # Utilities & data
│   ├── types.ts
│   ├── utils.ts
│   └── data.ts
└── hooks/                     # Custom hooks

Built with Next.js 16, React 19 & Tailwind CSS v4. Codebuff