Whop SaaS Starter

Welcome to the SaaS Starter documentation. This template gives you everything you need to launch a SaaS product — authentication, payments, subscriptions, and a dashboard — all wired up and ready to go.

What's Included

Authentication — OAuth 2.1 + PKCE via Whop (no client secret needed)
Payments — Embedded checkout with monthly/yearly billing
Plan Gating — requirePlan(), <PlanGate>, and Whop API access checks
Dashboard — Protected area with plan-gated features
Admin Settings — Branding, integrations (analytics, email, error tracking), and setup wizard
Docs — This documentation site (powered by Fumadocs)
AI Skill — Bundled agent skill that guides AI tools (Claude Code, Cursor, Copilot) on extending this template

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
Styling	Tailwind CSS v4
Database	PostgreSQL + Prisma 7
Auth & Payments	Whop
Core Library	whop-kit
Docs	Fumadocs + MDX

Quick Start (Recommended)

The fastest way to get started is with the CLI:

npx create-whop-kit my-app

This will:

Scaffold the template
Provision a database (Neon, Supabase, or Prisma Postgres)
Push to GitHub (private repo)
Deploy to Vercel (with auto-deploy on push)
Create your Whop app with OAuth + webhooks
Set up pricing plans

See the CLI Guide for full details.

Quick Start (Manual)

If you prefer to set things up manually:

# Clone and install
git clone https://github.com/whopio/whop-saas-starter.git
cd whop-saas-starter
pnpm install

# Set up your database
cp .env.example .env.local
# Add your DATABASE_URL to .env.local
pnpm db:push

# Start developing
pnpm dev

Visit http://localhost:3000 and the setup wizard will guide you through connecting Whop.

Managing Your Project

After setup, use the whop-kit CLI to manage your project:

npx whop-kit add plans         # create pricing plans on Whop
npx whop-kit add email         # add Resend or SendGrid
npx whop-kit add analytics     # add PostHog, GA, or Plausible
npx whop-kit status            # check what's configured
npx whop-kit deploy            # deploy to Vercel + connect Whop

Project Structure

app/
├── (auth)/              # Login, auth error pages
├── (marketing)/         # Pricing page
├── dashboard/           # Protected user area
├── checkout/            # Two-step payment flow
├── docs/                # This documentation
├── setup/               # First-run setup wizard
└── api/
    ├── auth/            # login, callback, logout, me, delete-account
    ├── billing/         # portal redirect, uncancel subscription
    ├── config/          # plans, accent color, integrations
    ├── search/          # Full-text docs search
    ├── setup/           # Setup wizard API
    └── webhooks/whop/   # Whop webhook handler
components/
├── landing/             # Hero, features, testimonials, pricing, CTA, header, footer
├── checkout/            # Billing form + Whop embed
├── dashboard/           # Sidebar, header, settings
└── setup/               # Setup wizard
content/docs/            # Documentation (MDX files — you're reading them!)
db/
├── index.ts             # Prisma client singleton
└── schema.prisma        # User + SystemConfig models
lib/
├── adapters/            # Framework adapters (Next.js cookies, Prisma DB)
├── auth.ts              # Session + plan gating (powered by whop-kit)
├── config.ts            # DB-backed configuration (powered by whop-kit)
├── whop.ts              # Whop OAuth, webhooks, access checks (powered by whop-kit)
├── subscription.ts      # Subscription helpers (powered by whop-kit)
├── analytics.ts         # Analytics script generation (powered by whop-kit)
├── email.ts             # Transactional email (powered by whop-kit)
├── constants.ts         # Plans, app name, links
└── source.ts            # Fumadocs content loader

Introduction