How to Completely Customize LaunchKit and Make It Your Own

You've purchased LaunchKit. Now it's time to transform it from a template into your product. This comprehensive guide walks through every customization point—from the config file to marketing copy to analytics integration.

By the end, you'll have a fully branded SaaS that looks and feels uniquely yours.

The Customization Roadmap

Here's what we'll cover in order of priority:

1. Config.ts — The central hub
2. Environment Variables — API keys and secrets
3. Visual Branding — Logo, colors, fonts
4. Marketing Content — Homepage, testimonials, FAQs
5. Legal Pages — Privacy Policy, Terms
6. Blog Setup — Categories, authors, first posts
7. CRM Configuration — Pipeline stages, lead sources
8. Email Templates — Transactional messages
9. Analytics — Tracking and insights
10. SEO — Meta tags, Open Graph, sitemap

1. The Config Hub: config.ts

This single file controls your entire application identity. Open config.ts in your project root.

Essential Fields to Change

const config = {
  // Your product name — appears in emails, UI, meta tags
  appName: "YourProduct",

  // SEO description — shown in search results
  appDescription: "Your compelling product description here",

  // Your domain (no https://, no trailing slash)
  domainName: "yourproduct.com",

  // Email configuration
  resend: {
    fromNoReply: "YourProduct <noreply@yourproduct.com>",
    fromAdmin: "Team at YourProduct <team@yourproduct.com>",
    supportEmail: "support@yourproduct.com",
  },
}

Stripe Plans

Update the stripe.plans array with your actual products:

stripe: {
  plans: [
    {
      priceId: process.env.NODE_ENV === "development"
        ? "price_test_xxx"
        : "price_live_xxx",
      name: "Starter",
      description: "Perfect for individuals",
      price: 29,
      priceAnchor: 49, // Optional crossed-out price
      features: [
        { name: "Feature one" },
        { name: "Feature two" },
        { name: "Feature three" },
      ],
    },
    {
      priceId: "price_xxx",
      isFeatured: true, // Highlights this plan
      name: "Pro",
      description: "For growing teams",
      price: 79,
      features: [
        { name: "Everything in Starter" },
        { name: "Pro feature one" },
        { name: "Pro feature two" },
      ],
    },
  ],
},

Optional Features

// AI features (requires API key)
llm: {
  enabled: true,
  provider: "openai", // or "anthropic"
  model: "gpt-4o-mini",
  leadEnrichment: true,
},

// Chatbot widget
chatbot: {
  enabled: true,
},

// Live chat support
crisp: {
  id: "your-crisp-id",
  onlyShowOnRoutes: ["/"], // Or remove to show everywhere
},

2. Environment Variables

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

Required for Core Features

# Supabase (from your project settings)
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxx...
SUPABASE_SERVICE_ROLE_KEY=eyJxxx...

# Stripe (from Stripe dashboard > Developers > API keys)
STRIPE_SECRET_KEY=sk_live_xxx
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxx
STRIPE_WEBHOOK_SECRET=whsec_xxx

# Email (from Resend dashboard)
RESEND_API_KEY=re_xxx

# Admin access (comma-separated emails)
ADMIN_EMAILS=you@yourproduct.com,cofounder@yourproduct.com

Optional Integrations

# AI Features
OPENAI_API_KEY=sk-xxx
# Or for Anthropic:
ANTHROPIC_API_KEY=sk-ant-xxx

# Analytics
NEXT_PUBLIC_GA4_ID=G-XXXXXXXXXX
NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX
NEXT_PUBLIC_CLARITY_ID=xxxxxxxxxx
NEXT_PUBLIC_POSTHOG_KEY=phc_xxx

# CRM Integrations
HUBSPOT_API_KEY=xxx
MAILCHIMP_API_KEY=xxx-us21
MAILCHIMP_LIST_ID=xxx
SLACK_WEBHOOK_URL=https://hooks.slack.com/xxx

3. Visual Branding

Logo and Icons

Replace these files in the app directory:

app/icon.png — Favicon (32x32 or 64x64)
app/icon.svg — Vector favicon (optional, takes priority)
app/apple-icon.png — Apple touch icon (180x180)
app/opengraph-image.png — Social share image (1200x630)
app/twitter-image.png — Twitter card image (1200x600)

Colors and Theme

LaunchKit uses DaisyUI themes. Edit tailwind.config.ts:

// tailwind.config.ts
daisyui: {
  themes: [
    {
      light: {
        "primary": "#3b82f6",      // Your brand color
        "primary-content": "#ffffff",
        "secondary": "#6366f1",
        "accent": "#f59e0b",
        "neutral": "#1f2937",
        "base-100": "#ffffff",
        "base-200": "#f9fafb",
        "base-300": "#e5e7eb",
      },
    },
    // Add a dark theme if needed
    {
      dark: {
        "primary": "#60a5fa",
        "base-100": "#1f2937",
        // ...
      },
    },
  ],
},

Then update config.ts to use your theme:

colors: {
  theme: "light", // or "dark" or your custom theme name
  main: "#3b82f6", // For browser chrome color
},

Fonts

Fonts are configured in app/layout.tsx. Change the imports:

import { Outfit, Source_Serif_4 } from "next/font/google";

const outfit = Outfit({
  subsets: ["latin"],
  variable: "--font-sans",
});

const sourceSerif = Source_Serif_4({
  subsets: ["latin"],
  variable: "--font-serif",
});

Apply in your JSX with className={outfit.variable}.

4. Marketing Content

The homepage is composed of modular components. Each needs your content.

Hero Section

Edit components/Hero.tsx:

<h1>Your compelling headline here</h1>
<p>Your subheadline that explains the value proposition</p>

Testimonials

Edit components/Testimonials3.tsx:

const list = [
  {
    name: "Real Customer Name",
    username: "their_twitter",
    text: "Authentic testimonial about your product...",
  },
  // Add 2 more for the 3-column layout
];

Features

Edit components/FeaturesListicle.tsx or components/FeaturesGrid.tsx:

const features = [
  {
    name: "Your Feature",
    description: "How it helps customers",
    svg: <YourIcon />,
  },
  // Add more features
];

FAQ

Edit components/FAQ.tsx:

const faqList = [
  {
    question: "Common question about your product?",
    answer: <p>Your helpful answer here.</p>,
  },
  // Add more Q&As
];

Pricing FAQ

The pricing page has its own FAQ in components/Pricing.tsx. Update the pricingFaq array with questions specific to your pricing model.

5. Legal Pages

Update with your company details and policies.

Privacy Policy

Edit app/privacy-policy/page.tsx:

Replace [Your Company Name] with your legal entity
Update the effective date
List the data you actually collect
Specify your data retention policies
Add your contact email

Terms of Service

Edit app/tos/page.tsx:

Your company name and jurisdiction
Service description
Payment and refund terms
Acceptable use policy
Limitation of liability

Tip: Have a lawyer review these before launch.

6. Blog Setup

The blog lives in app/blog/_assets/content.tsx.

Authors

export const authors = [
  {
    slug: "founder",
    name: "Your Name",
    job: "Founder & CEO",
    description: "Building YourProduct to help...",
    avatar: "/images/your-avatar.jpg", // Add to public/images
    socials: [
      {
        name: "Twitter",
        icon: socialIcons.twitter.svg,
        url: "https://twitter.com/yourhandle",
      },
    ],
  },
];

Your First Post

Delete the example articles and add your own:

export const articles = [
  {
    slug: "introducing-yourproduct",
    title: "Introducing YourProduct",
    description: "Why we built this and what it does",
    categories: [categories[0]],
    author: authors[0],
    publishedAt: "2024-12-20",
    image: {
      urlRelative: "/blog/intro/header.png",
      alt: "YourProduct launch",
    },
    content: (
      <>
        <section>
          <p className={styles.p}>Your content here...</p>
        </section>
      </>
    ),
  },
];

7. CRM Configuration

Pipeline Stages

Customize stages in supabase/seed.sql:

INSERT INTO lead_stages (name, display_order, color) VALUES
  ('new', 1, 'info'),
  ('contacted', 2, 'warning'),
  ('qualified', 3, 'success'),
  ('proposal', 4, 'primary'),
  ('closed_won', 5, 'success'),
  ('closed_lost', 6, 'error');

Lead Sources

INSERT INTO lead_sources (name, description) VALUES
  ('website', 'Website contact form'),
  ('referral', 'Customer referral'),
  ('linkedin', 'LinkedIn outreach'),
  ('conference', 'Industry conference');

Lead Form Fields

The lead capture form is in components/LeadForm.tsx. Add or remove fields as needed.

8. Email Templates

Email templates are in the libs/ directory. Key files:

libs/resend.ts — Email sending logic
app/api/webhook/stripe/route.ts — Post-purchase emails

Customize the email content and styling:

await resend.emails.send({
  from: config.resend.fromNoReply,
  to: customerEmail,
  subject: "Welcome to YourProduct!",
  html: `
    <h1>Thanks for purchasing!</h1>
    <p>Here's how to get started...</p>
  `,
});

9. Analytics Setup

LaunchKit supports multiple analytics providers. Add your IDs to config.ts:

analytics: {
  // Google Analytics 4
  ga4Id: "G-XXXXXXXXXX",

  // Google Tag Manager (for advanced tracking)
  gtmId: "GTM-XXXXXXX",

  // Microsoft Clarity (heatmaps, session replay)
  clarityId: "xxxxxxxxxx",

  // PostHog (product analytics, feature flags)
  posthogKey: "phc_xxx",
  posthogHost: "https://us.i.posthog.com",
},

The analytics are automatically initialized in libs/analytics.ts and loaded in the layout.

10. SEO Configuration

Global Metadata

Edit app/layout.tsx:

export const metadata = {
  title: {
    default: "YourProduct | Tagline",
    template: "%s | YourProduct",
  },
  description: "Your meta description here",
  keywords: ["keyword1", "keyword2"],
  authors: [{ name: "Your Name" }],
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://yourproduct.com",
    siteName: "YourProduct",
  },
  twitter: {
    card: "summary_large_image",
    creator: "@yourhandle",
  },
};

Page-Specific SEO

Each page can export its own metadata:

// app/pricing/page.tsx
export const metadata = {
  title: "Pricing",
  description: "Simple, transparent pricing for YourProduct",
};

Sitemap

The sitemap auto-generates at /sitemap.xml. Configure in app/sitemap.ts if you need to add or exclude routes.

Robots.txt

Edit app/robots.ts to control crawler access:

export default function robots() {
  return {
    rules: { userAgent: "*", allow: "/" },
    sitemap: "https://yourproduct.com/sitemap.xml",
  };
}

Quick Reference Checklist

Use this checklist to ensure you've customized everything:

Must Do (Before Launch)

Update appName, appDescription, domainName in config.ts
Add all environment variables to .env.local
Replace all image assets (favicon, OG images)
Update Stripe plan names and prices
Write Privacy Policy and Terms of Service
Update homepage hero, features, testimonials, FAQ
Configure email from addresses
Set ADMIN_EMAILS for dashboard access

Should Do (Launch Week)

Set up analytics (GA4, Clarity, or PostHog)
Configure CRM pipeline stages for your workflow
Write 2-3 initial blog posts
Update blog author profile and avatar
Set up Stripe webhook endpoint
Test email delivery

Nice to Have (Post-Launch)

Enable AI lead enrichment
Connect CRM integrations (HubSpot, Mailchimp)
Set up Slack/Discord notifications
Configure Crisp for live chat
Add custom fonts
Create dark mode theme

Files at a Glance

Here's a quick reference of key files and what they control:

config.ts                    → App name, Stripe plans, email, features
.env.local                   → API keys and secrets
tailwind.config.ts           → Colors, theme, fonts
app/layout.tsx               → Global metadata, fonts, providers
app/page.tsx                 → Homepage layout

components/
├── Hero.tsx                 → Main headline and CTA
├── FeaturesListicle.tsx     → Feature list
├── Testimonials3.tsx        → Customer quotes
├── FAQ.tsx                  → Common questions
├── Pricing.tsx              → Plans + pricing FAQ
├── Footer.tsx               → Links and branding
└── LeadForm.tsx             → Lead capture fields

app/
├── icon.png, icon.svg       → Favicon
├── opengraph-image.png      → Social sharing
├── privacy-policy/page.tsx  → Privacy policy
├── tos/page.tsx             → Terms of service
└── blog/_assets/content.tsx → Blog posts and authors

supabase/seed.sql            → CRM stages and sources

Next Steps

Once you've completed the customization:

Run the build — npm run build to catch any errors
Test locally — npm run dev and click through every page
Deploy to staging — Push to a preview branch first
Test payments — Use Stripe test cards to verify the flow
Go live — Switch to production Stripe keys and launch!

You now have a fully customized SaaS ready for customers. Ship it!

Ready to ship faster?

LaunchKit gives you auth, payments, CRM, and everything you need to launch your SaaS in days, not months.

Get LaunchKit