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

Watch the Setup Video

If you'd rather follow along visually, start with the full setup walkthrough here:

Watch the video on YouTube

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:

Project Name — the directory name for your project
Theme Selection — choose from 13+ production-ready themes
Payment Provider — Stripe, Lemon Squeezy, or Polar
Email Provider — Resend, Mailgun, or Brevo
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

💡

You can switch themes at any time by changing the theme value in mantle.config.ts.

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,
  },
};

ℹ️

When database is set to false, auth and social features are automatically disabled. This is the configuration used for the Landing tier.

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
NEXT_PUBLIC_SITE_URL set to your production domain, for example https://yourdomain.com
Your payment provider's API keys
Your email provider's API key

⚠️

Do not commit your .env.local file. Add environment variables through your hosting dashboard instead.

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:

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

GitHub OAuth

GitHub sign-in is set up similarly:

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

💡

For the full step-by-step setup for both Google OAuth and GitHub OAuth, see the Integrations guide.

Database Setup

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

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

This creates the core ecommerce and blog-social tables plus the newer admin tables for:

public.profiles admin roles
teams and calendar workspaces
comment moderation settings
analytics events

It also seeds example products and applies the current RLS policies.

Make Yourself Admin

If you're using the dashboard, you'll also want to promote your own account to admin after running the database setup.

Sign up for your site once so your user exists in Supabase Auth
Open the Supabase SQL Editor
Run:

update public.profiles
set role = 'admin'
where email = 'you@yourdomain.com';

Verify it worked:

select email, role
from public.profiles
where email = 'you@yourdomain.com';

💡

The dashboard and admin API routes now check public.profiles.role = 'admin', so being logged in alone is not enough.

Run the Dev Server

npm run dev

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

Deploying to Vercel

Connect Your Repository

Go to vercel.com/new
Import your Git repository
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_SITE_URL=https://yourdomain.com
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

💡

You can copy the Supabase values from your project's Settings → API page. NEXT_PUBLIC_SITE_URL should be your final public domain and should use https://.

Custom Domain

After your first deploy:

Go to your project's Settings → Domains
Add your custom domain
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
If you're using blog comments, review the moderation rules in /settings/moderation or /dashboard/comments

Getting Started with MantleKit