Customization
Customize theming, branding, and site configuration
Customization
LaunchSaaS is built to be highly customizable. This guide covers site configuration, theming, and branding.
Site Configuration
LaunchSaaS uses a modular configuration system. All configuration files are located in src/configuration/:
| 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 |
fotoer.ts | Footer links and badges |
social-links.ts | Social media links |
product.ts | Pricing and product configuration |
Metadata
Edit src/configuration/metadata.ts to customize your site's basic information:
import { Metadata } from "@/schemas/site-configuration";
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"],
};Navigation Bar
Edit src/configuration/navbar.ts to customize header navigation:
import { NavBar } from "@/schemas/site-configuration";
import { SiVercel } from "react-icons/si";
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" },
],
};Sidebar (Dashboard/Admin)
Edit src/configuration/sidebar.ts to customize the sidebar for protected routes:
import { SideBar } from "@/schemas/site-configuration";
import { LuCreditCard, LuSettings, LuUserCog } from "react-icons/lu";
export const sidebar: SideBar = {
groups: [
{
title: "Admin",
items: [
{
icon: LuUserCog,
title: "Users",
href: "/admin/users",
roles: ["admin"], // Only visible to admin
},
],
},
{
title: "Settings",
items: [
{
icon: LuCreditCard,
title: "Billing",
href: "/billing",
roles: ["user"], // Only visible to user
},
{
icon: LuSettings,
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).
User Button Menu
Edit src/configuration/user-button.tsx to customize the user dropdown menu:
import { UserButton } from "@/schemas/site-configuration";
import { LuCreditCard, LuLayoutDashboard, LuSettings } from "react-icons/lu";
export const userButton: UserButton = {
menus: [
{
title: "Billing",
href: "/billing",
icon: LuCreditCard,
roles: ["user"],
},
{
title: "Dashboard",
href: "/admin/users",
icon: LuLayoutDashboard,
roles: ["admin"],
},
],
};Footer
Edit src/configuration/fotoer.ts to customize footer links:
import { Footer } from "@/schemas/site-configuration";
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.
],
};Social Links
Edit src/configuration/social-links.ts to add your social media profiles:
import { SocialLink } from "@/schemas/site-configuration";
import { SiGithub, SiX, SiDiscord } from "react-icons/si";
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 src/app/globals.css.
Colors
Customize colors in 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:
npx shadcn@latest add button
npx shadcn@latest add cardComponents are added to src/components/ui/.
Landing Page
Customize landing page sections in 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 |
Product Configuration
Configure your pricing and products in src/configuration/product.ts:
- Define subscription plans with Stripe Price IDs
- Define one-time payment products
- Configure payment completion hooks
- Set which product to show on pricing page
Email Templates
Customize email templates in src/components/email-templates/:
email-verification.tsx- Verification emailforget-password.tsx- Password reset emailmagic-link.tsx- Magic link login emailwelcome.tsx- Welcome email
Blog & Docs
Blog Posts
Add blog posts in content/blog/ as MDX files:
---
title: Your Post Title
description: Post description
date: 2025-01-15
author: Author Name
category: Category
published: true
---
Your content here...Documentation
Add documentation pages in content/docs/ as MDX files. Update content/docs/meta.json to configure the sidebar order.
Assets
- Logo: Replace
public/logo.png - Favicon: Update files in
public/ - Images: Add to
public/directory