Getting Started with MantleKit

Welcome to MantleKit! This guide walks you through setting up your project from scratch and deploying it live.

Prerequisites

• Node.js 18 or later
• A Supabase account (free tier works) — optional if using database: false
• A payment provider account (Stripe, Lemon Squeezy, or Polar)
• A Vercel account for deployment

Installation

Run the CLI with your licence key:

npx create-mantlekit --key MK-XXXX-XXXX

The CLI will guide you through:

1. Project Name — the directory name for your project
2. Theme Selection — choose from 5 production-ready themes
3. Payment Provider — Stripe, Lemon Squeezy, or Polar
4. Email Provider — Resend, Mailgun, or Brevo
5. Feature Selection — based on your tier

Project Structure

MantleKit follows a standard Next.js App Router structure with a few additions:

app/
├── (marketing)/    # Landing pages, pricing
├── (blog)/         # Blog system
├── (app)/          # Authenticated app routes
├── (shop)/         # Ecommerce pages
├── (support)/      # FAQ and Knowledge Base
└── api/            # API routes

Configuration

All configuration lives in mantle.config.ts at the project root:

const mantleConfig = {
  theme: "minimal",
  database: true,
  features: {
    blog: true,
    ecommerce: false,
    chatWidget: true,
    supportPages: true,
  },
};

Environment Variables

Copy .env.example to .env.local and fill in your credentials:

cp .env.example .env.local

At minimum, you need:

• Supabase URL and Anon Key
• Your payment provider's API keys
• Your email provider's API key

Authentication Setup

If you're using auth, finish the provider setup in Supabase before you test sign-in flows.

Google OAuth

Google sign-in needs one extra setup step outside Supabase:

1. Create a Google OAuth app in Google Cloud Console
2. Add your Supabase callback URL: https://<your-project>.supabase.co/auth/v1/callback
3. Paste the Google Client ID and Client Secret into Supabase → Authentication → Providers → Google

GitHub OAuth

GitHub sign-in follows the same Supabase provider flow:

1. Create a GitHub OAuth app in GitHub → Settings → Developer settings → OAuth Apps
2. Set the callback URL to: https://<your-project>.supabase.co/auth/v1/callback
3. Paste the GitHub Client ID and Client Secret into Supabase → Authentication → Sign In / Providers → GitHub

Database Setup

Run the unified setup script in your Supabase SQL Editor to create all required tables:

1. Go to your Supabase Dashboard → SQL Editor
2. Open supabase/setup.sql from your project
3. Paste and run the entire script

This creates subscriptions, products, orders, webhook events, licence key, and blog social (comments, votes, likes) tables with RLS policies and seed data.

Run the Dev Server

npm run dev

Visit http://localhost:3000 to see your app running.

Deploying to Vercel

Connect Your Repository

1. Go to vercel.com/new
2. Import your Git repository
3. Vercel will auto-detect Next.js settings — no custom build config needed

Add Environment Variables

In Vercel's project settings, add your environment variables:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

Custom Domain

After your first deploy:

1. Go to your project's Settings → Domains
2. Add your custom domain
3. Update your DNS records as instructed by Vercel

Continuous Deployment

Every push to your main branch triggers a new deployment. Preview deployments are created automatically for pull requests.

Next Steps

• Customise your theme's CSS variables in themes/<name>/theme.css
• Add blog posts to the content/ directory
• Configure your pricing plans in mantle.config.ts
• Set up webhook endpoints for your payment provider
• Check out the Integrations guide for provider setup details