Documentation

SaaSKit gives you everything you need to build and launch your SaaS app fast. It comes ready with login/authentication, database support (PostgreSQL & MongoDB), payment integration with Stripe, and more. SaaSKit is an all‑in‑one starter kit designed to help you create modern applications quickly. Build your SaaS and launch it in just one day with this comprehensive boilerplate.

Built-in Features

Authentication

Google OAuth and credential-based auth via NextAuth.js.

Payments

Stripe-powered subscriptions, checkout, and webhooks.

Database

PostgreSQL or MongoDB managed through Prisma ORM.

Emails

Transactional emails using customizable React templates.

Storage

Effortless file & image storage via AWS S3 or Cloudinary.

Chatbot (OpenAPI)

Built-in AI chat powered by OpenAI API with streaming responses.

And more

Teams, invitations, notifications, activities log, pricing page wired to Stripe products, and docs-ready setup scripts.

Get Started

Installation

Only 3 steps to get started. The setup script will guide you through configuration.

1. pnpm env:setup # Setup environment variables
2. pnpm db:setup  # Setup database
3. pnpm dev       # Run development server

Here are the steps to set things up. This guide will help you prepare and adjust the boilerplate so you can launch your SaaS app quickly. Just follow the steps below to start.

Stripe Webhooks (Local Development)

Listen for Stripe webhooks locally to handle subscription events:

1. Install Stripe CLI

Install Stripe CLI and log in:

stripe login

2. Forward webhooks to local server

stripe listen --forward-to localhost:3000/api/stripe/webhook

Setup Configuration

Run the interactive setup script to configure your environment:

pnpm env:setup

The setup script will ask you to:

Choose between PostgreSQL or MongoDB
Choose between local (Docker) or remote database
Enter your Stripe Secret Key
Automatically creates Stripe webhook (via Stripe CLI)
Enter your Google OAuth credentials (Client ID & Secret)
Configure SMTP email settings (host, port, credentials)
Choose storage service (Cloudinary or AWS S3) and provide credentials
Enter your OpenAI API Key (OPENAI_API_KEY) - ChatBot integration
Stripe product and price Setup
Optionally set up an initial team name

💡 The script will automatically generate AUTH_SECRET and create a .env file with all configurations.

Database Setup

Run database migrations and seed the database:

pnpm db:setup:postgres

Switch Database Anytime

You can switch between PostgreSQL and MongoDB at any time:

pnpm db:switch

Default User Credentials

The seed script creates a default user and team for testing:

Email: test@test.com

Password: admin123

You can also create new users through the /sign-up route.

Run Development Server

Start the Next.js development server:

pnpm dev

Open http://localhost:3000 in your browser.

Prisma Studio (Database GUI)

Launch Prisma Studio to view and edit database data:

pnpm db:studio

Opens a web-based GUI for inspecting tables, making quick changes, or debugging.

Project Structure

Here's how your project is organized:


├── prisma/                  # Prisma schema and migrations
├── public/                  # Static assets
├── app/                     # Next.js App Router
│   ├── (landing)/           # Landing pages
│   │   ├── page.tsx         # Home page
│   │   ├── docs/            # Documentation
│   │   ├── pricing/         # Pricing page
│   ├── (login)/             # Authentication pages
│   │   ├── login.tsx
│   │   ├── sign-in/
│   │   ├── sign-up/
│   ├── (dashboard)/         # Protected dashboard
│   │   ├── dashboard/       # Dashboard pages
│   ├── api/                 # API routes
│   │   ├── auth/            # Authentication routes
│   │   ├── chat/            # Chat API
│   │   ├── stripe/          # Stripe webhooks
│   │   ├── team/            # Team management
│   │   ├── user/            # User management
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout
├── components/              # React components
│   ├── ui/                  # UI components (shadcn/ui)
│   ├── dashboard/           # Dashboard components
│   ├── landing/             # Landing page components
│   ├── auth/                # Auth components
│   ├── chat/                # Chat components
│   ├── team/                # Team components
├── hooks/                   # Custom React hooks
│   ├── use-mobile.tsx
│   ├── use-toast.ts
├── lib/                     # Utility functions
│   ├── auth/                # Auth utilities
│   ├── db/                  # Database utilities
│   ├── email/               # Email utilities
│   ├── payments/            # Payment utilities
│   ├── storage/             # Storage utilities
│   ├── actions.ts           # Server actions
│   ├── utils.ts             # General utilities
├── types/                   # TypeScript types
├── middleware.ts            # Next.js middleware
├── next.config.ts           # Next.js configuration
├── tsconfig.json            # TypeScript config
└── tailwind.config.ts       # Tailwind CSS config

Authentication

Google OAuth Setup

Follow these steps to set up Google OAuth authentication for your application.

Step 1: Go to Google Cloud Console

Navigate to Google Cloud Console and create a new project or select an existing one.

Step 2: Enable APIs & Services

Search for 'APIs & Services' and click on it. Then go to the 'Credentials' tab.

Step 3: Create OAuth Credentials

Click 'Create Credentials' > 'OAuth client ID' > Select 'Web Application'

Step 4: Configure Authorized Origins

Add your development and production URLs

http://localhost:3000

https://your-domain.com

Step 5: Configure Redirect URIs

Add your OAuth callback URLs

http://localhost:3000/api/auth/callback/google

https://your-domain.com/api/auth/callback/google

Step 6: Copy Credentials

Copy the Client ID and Client Secret to your .env file

Add to .env file:

GOOGLE_CLIENT_ID=your-client-id-here
GOOGLE_CLIENT_SECRET=your-client-secret-here

Databases

Database Configuration

PostgreSQL is fully supported and recommended for production environments with complex queries.

Add to .env file:

DATABASE_TYPE=postgresql
POSTGRES_URL=postgresql://user:password@localhost:5432/dbname

For local development on Windows, install PostgreSQL from official site

Emails

Email Configuration (Nodemailer)

Enable 2-Factor Authentication on your Google Account
Go to App Passwords
Select "Mail" and "Windows Computer" (or your device)
Generate and copy the app password

SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
SMTP_USER=your-email@gmail.com
SMTP_PASSWORD=your-app-password
SMTP_FROM=noreply@example.com

Payment (Stripe)

Stripe Integration

Set up Stripe for handling payments and subscriptions.

Sign up at Stripe
Get your API keys from the Dashboard
Set up webhook endpoints for events

Add to .env file:

STRIPE_SECRET_KEY=sk_test_***
STRIPE_WEBHOOK_SECRET=whsec_***

Testing Payments

Use these test card details:

Card Number: 4242 4242 4242 4242

Expiration: Any future date

CVC: Any 3-digit number

Products & Pricing Plans

The seed script automatically creates Stripe products and prices when you run database setup. By default, it creates two subscription plans:

Base Plan

$8/month

7-day free trial

Plus Plan

$12/month

7-day free trial

Customizing Pricing Plans

Edit lib/db/seed.ts to customize your pricing. The createStripeProducts() function creates products in Stripe:

async function createStripeProducts() {
  // ✅ Base product ($8/month with 7-day trial)
  const baseProduct = await stripe.products.create({
    name: 'Base',
    description: 'Base subscription plan',
  });

  await stripe.prices.create({
    product: baseProduct.id,
    unit_amount: 800, // $8 in cents
    currency: 'usd',
    recurring: {
      interval: 'month',
      trial_period_days: 7,
    },
  });

  // ✅ Plus product ($12/month with 7-day trial)
  const plusProduct = await stripe.products.create({
    name: 'Plus',
    description: 'Plus subscription plan',
  });

  await stripe.prices.create({
    product: plusProduct.id,
    unit_amount: 1200, // $12 in cents
    currency: 'usd',
    recurring: {
      interval: 'month',
      trial_period_days: 7,
    },
  });
}

💡 Important Notes

Products are automatically created in Stripe when you run pnpm db:setup
The /pricing page fetches prices from Stripe in real-time via getStripePrices()
To change prices: Edit unit_amount (in cents), interval (month/year), or trial_period_days
To add more plans: Duplicate the product creation block and update components/landing/PricingSection.tsx
Plan features (bullet points) are defined in PricingSection.tsx, not in Stripe
After editing seed.ts, re-run pnpm db:seed to update products in Stripe

Storage

Image Storage Configuration

Go to Cloudinary and sign up
Go to Dashboard and copy your Cloud Name
Go to Settings → API Keys to get your API Key
Scroll down to find your API Secret

STORAGE_TYPE=cloudinary
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

Deployment to Production

Deploy to Vercel

Push your code to a GitHub repository
Connect your repository to Vercel and deploy it
Follow the Vercel deployment process

Set up Production Stripe Webhook

Go to Stripe Dashboard and create a new webhook
Set endpoint URL to: https://yourdomain.com/api/stripe/webhook
Select events: checkout.session.completed, customer.subscription.updated

Production Environment Variables

Add these environment variables in your Vercel project settings:

BASE_URL=https://your-domain.com
STRIPE_SECRET_KEY=sk_live_***  # Use LIVE key for production
STRIPE_WEBHOOK_SECRET=whsec_***  # From production webhook
DATABASE_TYPE=postgresql  # or mongodb
POSTGRES_URL=postgresql://***  # Production database URL
# OR
MONGODB_URL=mongodb+srv://***  # Production MongoDB URL
AUTH_SECRET=***  # Generate with: openssl rand -base64 32
NEXTAUTH_SECRET=***
NEXTAUTH_URL=https://your-domain.com

⚠️ Important

Always use production Stripe keys and webhook secrets for your live environment. Never commit secrets to version control.

Database Migration

Run migrations in your CI/CD pipeline or manually:

npx prisma migrate deploy

Resources

Supercharge Your Development

Explore a curated set of top-notch resources to accelerate your UI projects and elevate your SaaS applications. Discover a thoughtfully selected collection of libraries, tools, and inspiration to help you build outstanding user interfaces with Next.js, Tailwind CSS, and Shadcn/ui.

Tech Stack

This starter kit is built with modern, production-ready technologies:

Next.js 16.1

React 19 framework with App Router, Server Components, and API routes

TypeScript 5.8

Type-safe development with full IDE support and latest features

Radix UI + Tailwind CSS

Accessible components with Radix UI primitives styled with Tailwind utility classes

Framer Motion 12

Production-ready motion library for React animations

Prisma 6.0

Type-safe ORM with PostgreSQL & MongoDB support

NextAuth.js 4.24

Authentication with email/password, Google OAuth, and invitation-based signup

Stripe 18

Payment processing with subscription management and webhooks

TanStack Query 5

Powerful data fetching and state management for React applications

Zod 3.24

TypeScript-first schema validation with static type inference

Component Libraries & UI Resources

This starter kit is built with these core libraries. Explore their documentation to extend and customize your application:

Radix UI Primitives

30+ unstyled, accessible component primitives powering all UI components. Features full keyboard navigation, focus management, and ARIA compliance. Includes Dialog, Dropdown, Select, Tabs, and more.

Lucide Icons (v0.511)

1000+ beautiful, consistent SVG icons used throughout this starter kit. Fully tree-shakeable, TypeScript-ready, and customizable with Tailwind classes. Simply import and use as React components.

Framer Motion (v12.25)

Production-ready animation library already integrated. Add smooth transitions, gesture-based interactions, and scroll-triggered animations. Simple declarative API with full TypeScript support.

Tailwind CSS (v3.4)

Utility-first CSS framework powering all styling. Includes tailwindcss-animate for animations and tw-animate-css for extended animation utilities. Full dark mode support and responsive design built-in.

TanStack Query (v5.83)

Powerful data fetching and state management for React. Handles caching, synchronization, and background updates. Used for API calls, real-time data, and optimistic updates throughout the app.

React Hook Form (v7.61)

Performant form validation library with minimal re-renders. Integrated with Zod for schema validation. Used in authentication, settings, and all form inputs throughout the application.

Official Documentation

Quick links to official documentation for the core technologies:

Next.js Documentation Tailwind CSS Documentation Prisma Documentation Stripe Documentation