Customization

LaunchSaaS is built to be highly customizable. This guide covers site configuration, theming, and branding.

Site Configuration

LaunchSaaS uses an app-owned configuration system. Branding, navigation, auth settings, and product instances live in apps/launchsaas/src/configuration/, while reusable contracts come from shared packages:

File	Description
`metadata.ts`	Site name, title, description, logo, SEO
`navbar.ts`	Navigation bar items and actions
`sidebar.ts`	Dashboard/Admin sidebar with role-based access
`user-button.tsx`	User dropdown menu with role-based items
`footer.ts`	Footer links and badges
`social-links.ts`	Social media links
`product/`	Environment-specific pricing and products

Metadata

Edit apps/launchsaas/src/configuration/metadata.ts to customize your site's basic information:

import type { Metadata } from "@/configuration/types";

export const metadata: Metadata = {
  name: "Your SaaS Name",
  title: "Your SaaS – Tagline for SEO",
  tagline: "Your catchy tagline",
  description: "Your SaaS description for SEO",
  logo: "/logo.png",
  ogImage: "/og.png",
  keywords: ["keyword1", "keyword2"],
};

Edit apps/launchsaas/src/configuration/navbar.ts to customize header navigation:

import type { NavBar } from "@/configuration/types";
import { SiVercel } from "@icons-pack/react-simple-icons";

export const navbar: NavBar = {
  // Navigation items (supports nested menus)
  items: [
    { title: "Features", href: "/#features" },
    { title: "Pricing", href: "/#pricing" },
    { title: "Blog", href: "/blog" },
    // Nested menu with icons and descriptions
    {
      title: "Products",
      children: [
        {
          icon: SiVercel,
          title: "Product One",
          href: "/products/one",
          description: "Description for product one",
        },
      ],
    },
  ],
  // Action buttons (shown when signed out)
  actions: [
    { item: { title: "Sign in", href: "/auth/sign-in" }, variant: "outline" },
    { item: { title: "Get Started", href: "/#pricing" }, variant: "default" },
  ],
};

Edit apps/launchsaas/src/configuration/sidebar.ts to customize the sidebar for protected routes:

import type { SideBar } from "@/configuration/types";
import { CreditCard, Settings, UserCog } from "lucide-react";

export const sidebar: SideBar = {
  groups: [
    {
      title: "Admin",
      items: [
        {
          icon: UserCog,
          title: "Users",
          href: "/admin/users",
          roles: ["admin"], // Only visible to admin
        },
      ],
    },
    {
      title: "Settings",
      items: [
        {
          icon: CreditCard,
          title: "Billing",
          href: "/billing",
          roles: ["user"], // Only visible to user
        },
        {
          icon: Settings,
          title: "Settings",
          href: "/settings",
          roles: ["user"],
        },
      ],
    },
  ],
};

The sidebar supports role-based visibility - items are automatically filtered based on the user's role (user or admin).

Edit apps/launchsaas/src/configuration/user-button.tsx to customize the user dropdown menu:

import type { UserButton } from "@/configuration/types";
import { CreditCard, LayoutDashboard, Settings } from "lucide-react";

export const userButton: UserButton = {
  menus: [
    {
      title: "Billing",
      href: "/billing",
      icon: CreditCard,
      roles: ["user"],
    },
    {
      title: "Dashboard",
      href: "/admin/users",
      icon: LayoutDashboard,
      roles: ["admin"],
    },
  ],
};

Edit apps/launchsaas/src/configuration/footer.ts to customize footer links:

import type { Footer } from "@/configuration/types";

export const footer: Footer = {
  groups: [
    {
      title: "Product",
      menus: [
        { title: "Features", href: "/#features" },
        { title: "Pricing", href: "/#pricing" },
      ],
    },
    {
      title: "Legal",
      menus: [
        { title: "Privacy", href: "/privacy" },
        { title: "Terms", href: "/terms" },
      ],
    },
  ],
  badges: [
    // Optional: Add badges like ProductHunt, etc.
  ],
};

Edit apps/launchsaas/src/configuration/social-links.ts to add your social media profiles:

import type { SocialLink } from "@/configuration/types";
import { SiGithub, SiX, SiDiscord } from "@icons-pack/react-simple-icons";

export const socialLinks: SocialLink[] = [
  { icon: SiGithub, title: "GitHub", href: "https://github.com/your-org" },
  { icon: SiX, title: "Twitter", href: "https://x.com/your-handle" },
  { icon: SiDiscord, title: "Discord", href: "https://discord.gg/your-invite" },
];

Theming

LaunchSaaS uses Tailwind CSS with shadcn/ui theming.

Theme Generators

You can use online tools to generate custom themes:

tweakcn - Visual theme editor for shadcn/ui
shadcn themes - Official shadcn/ui theme generator

After generating your theme, copy the CSS variables to apps/launchsaas/src/app/globals.css.

Colors

Customize colors in apps/launchsaas/src/app/globals.css using CSS variables:

@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    /* ... */
  }

  .dark {
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    /* ... */
  }
}

Adding Components

Add new shadcn/ui components:

pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add card

Shared shadcn and source-vendored UI components are added to packages/design-system/ui/src/components/. App-specific components should stay in the app workspace and import shared shadcn primitives from @launchsaas/ui/components/ui/*. Keep apps/launchsaas/src/app/globals.css as the Tailwind entry stylesheet, and make sure it includes @source "../../../../packages/design-system/ui/src"; so classes used inside the shared UI package are generated in the app build.

Landing Page

Customize landing page sections in apps/launchsaas/src/components/landing/:

Component	Description
`hero.tsx`	Hero section
`features.tsx`	Features grid
`pricing.tsx`	Pricing plans
`faq.tsx`	FAQ accordion
`testimonials.tsx`	Customer testimonials
`cta.tsx`	Call to action

AI-powered design: Use Impeccable to give your AI agent a persistent understanding of your brand style, then use the frontend-design skill to generate polished, on-brand sections. See Marketing Page Design with AI.

Product Configuration

Configure your pricing and products in apps/launchsaas/src/configuration/product/. The product catalog types and lookup helpers are app-owned:

Define subscription plans with Stripe Price IDs
Define one-time payment products
Keep sandbox and live product IDs in one catalog with the sandbox flag
Choose the pricing page product in the small helper exported from apps/launchsaas/src/configuration/product/index.ts

Email Templates

Email layout is provided by @launchsaas/email-templates in packages/design-system/email-templates. Email content is configured via translations in messages/[locale].json under the Email namespace. Edit the content, heading, and action fields for each template type (emailVerification, resetPassword, magicLink, paymentCompleted, welcome).

To preview all templates with live reload:

pnpm run dev:email
# → http://localhost:3003

Preview files are in apps/email/emails/. They provide mock data and render the shared layout; they do not own separate template implementations.

Blog & Content

All content is stored as MDX files under content/:

Directory	Description
`content/blog/`	Blog posts
`content/docs/`	Documentation pages
`content/changelog/`	Changelog entries
`content/pages/`	Static pages (terms, privacy, license, etc.)

See the Blog & Content guide for frontmatter schemas and examples.

Assets

Logo: Replace public/logo.png
Favicon: Update files in public/
Images: Add to public/ directory

Site Configuration

Metadata

Navigation Bar

Sidebar (Dashboard/Admin)

User Button Menu

Footer

Theming

Theme Generators

Colors

Adding Components

Landing Page

Product Configuration

Email Templates

Blog & Content

Assets

References

Next Steps

Structure

Blog

Deployment

On this page