Customize Logo & Branding

Make the SaaS starter kit truly yours by customizing the site name, tagline, social links, and adding your company logo. All branding is centralized in one configuration file for easy updates.

ℹ️

Prerequisites

Your company logo files (SVG format recommended)
Company name, tagline, and website URL
Social media links (Twitter, GitHub, etc.)
Text editor to modify src/config/site.config.ts

Understanding the Branding System

All branding elements are managed through a centralized configuration file (src/config/site.config.ts) that controls:

Site Metadata: Name, description, tagline, URL
Navigation: Header and footer links
Social Links: Twitter, GitHub, and other social profiles
Landing Page Content: Headlines, features, calls-to-action
Fonts: Typography choices for body, headings, and code

Step-by-Step Branding Customization

Update Site Metadata

Open src/config/site.config.ts and update the metadata section with your company information:

src/config/site.config.ts

1export const siteConfig: SiteConfig = {
2  metadata: {
3    name: "Your Company Name",          // Replace with your brand
4    description: "Your product description for SEO",
5    tagline: "Your memorable tagline",  // Appears in footer
6    url: "https://your-domain.com",     // Production URL
7    socialLinks: {
8      twitter: "https://twitter.com/your-handle",
9      github: "https://github.com/your-repo",
10      // Add more: linkedin, facebook, instagram, etc.
11    },
12  },
13  // ... rest of config
14};

💡

SEO Tip

The description field is used for meta tags. Keep it concise (150-160 characters) and include relevant keywords for search engines.

Customize Landing Page Content

Update the hero section to reflect your product's value proposition:

src/config/site.config.ts

1sections: {
2  order: ["hero", "features", "techStack"],
3 
4  hero: {
5    enabled: true,
6    headline: "Your Product's Main Value Prop",
7    subheadline: "Explain what your product does and who it's for",
8    primaryCta: {
9      label: "Get Started",  // Button text
10      href: "/login",        // Where it leads
11    },
12  },
13  // ... rest of sections
14}

Before & After Example:

Before (default):

"Ship your SaaS faster"

After (customized):

"Manage your team's projects effortlessly"

Customize Features Section

Update the features to highlight YOUR product's capabilities:

src/config/site.config.ts

1features: {
2  enabled: true,
3  headline: "Everything you need to succeed",
4  subheadline: "Built for modern teams",
5  items: [
6    {
7      icon: "Zap",  // lucide-react icon name
8      title: "Lightning Fast",
9      description: "Optimized for speed and performance"
10    },
11    {
12      icon: "Shield",
13      title: "Secure by Default",
14      description: "Enterprise-grade security built in"
15    },
16    // Add or modify features as needed
17  ],
18},

ℹ️

Available Icons

The starter uses lucide-react for icons. Browse the icon library and use any icon name (e.g., "Rocket", "Users", "Star").

Add Your Logo

Replace the default logo by adding your logo file to the public/ directory:

📁public

📄logo.svg

📄logo-dark.svg

📄favicon.ico

Recommended formats:

SVG: Best for logos (scalable, small file size)
PNG: Alternative if SVG not available (use 2x resolution for retina)
Dark mode: Provide a separate logo for dark backgrounds (optional)

💡

Logo Dimensions

Recommended size: 120-200px wide, 40-60px tall. The header will automatically scale it to fit.

Update Navigation Links

Customize header and footer navigation to match your needs:

src/config/site.config.ts

1navigation: {
2  header: [
3    { label: "Features", href: "/#features" },
4    { label: "Pricing", href: "/pricing" },
5    { label: "Blog", href: "/blog" },       // Add new links
6    { label: "Docs", href: "/docs" },
7  ],
8  footer: {
9    links: [
10      { label: "Privacy Policy", href: "/privacy" },
11      { label: "Terms of Service", href: "/terms" },
12      { label: "Contact", href: "/contact" },  // Add more links
13    ],
14    showSocialLinks: true,  // Enable social icons in footer
15    copyrightText: "© 2025 Your Company Name. All rights reserved.",
16  },
17},

Customize Typography (Optional)

Change the fonts to match your brand identity. Popular options include Inter, Poppins, Roboto, and Montserrat:

src/config/site.config.ts

1fonts: {
2  sans: "Inter",           // Body text font
3  heading: "Poppins",      // Optional: different font for headings
4  mono: "JetBrains Mono",  // Code blocks and monospace
5},

⚠️

Font Loading

Make sure to import custom fonts in src/app/layout.tsx if you're using Google Fonts or other font providers. The starter includes Geist Sans and Geist Mono by default.

Advanced Customization

Section Reordering

Change the order of landing page sections by modifying the order array:

src/config/site.config.ts

1sections: {
2  // Change the order to match your priorities
3  order: ["hero", "pricing", "features", "faq", "cta"],
4 
5  // Enable/disable specific sections
6  pricing: { enabled: true },
7  faq: { enabled: true },
8  cta: { enabled: true },
9}

Favicon and Metadata

Configure your favicon in src/config/site.config.ts:

src/config/site.config.ts

1metadata: {
2  name: "Your Company Name",
3  shortName: "Your Company",
4  // icon: "/favicon.ico", // Uncomment to display in browser tab
5  description: "Your product description",
6  // ...
7},

Then add your favicon file to the public/ folder (e.g., public/favicon.ico).

Custom Og Image

Create a custom Open Graph image (1200x630px) for social media sharing:

Design an image with your logo, tagline, and branding (1200x630px)
Save as public/og-image.png
Update the metadata in src/app/layout.tsx (shown above)
Test with metatags.io

Before & After Examples

Before (Default)

Name: SaaS Starter

Tagline: Ship your SaaS faster

Hero: "A production-ready B2C SaaS starter..."

CTA: Get Started

After (Customized)

Name: ProjectFlow

Tagline: Manage projects effortlessly

Hero: "Streamline your team's workflow with..."

CTA: Start Free Trial

💡

Visual Preview

After making changes, preview your branding by visiting:

Landing page: http://localhost:3000
Pricing page: http://localhost:3000/pricing
Dashboard: http://localhost:3000/app/dashboard

Troubleshooting

Changes not appearing

If your branding updates don't show up:

Make sure you saved src/config/site.config.ts
Restart the dev server: npm run dev
Clear browser cache (Cmd+Shift+R / Ctrl+Shift+R)
Check the browser console for TypeScript errors

Logo not displaying correctly

Common logo issues and solutions:

File not found: Verify the logo file is in public/ directory
Wrong size: Resize to recommended dimensions (120-200px wide)
Poor quality: Use SVG format for best results
Dark mode issue: Provide separate logo-dark.svg file

TypeScript errors after editing config

If you see type errors:

Make sure all required fields are filled in
Check that icon names match lucide-react icons
Verify URLs start with http:// or https://
Run npm run typecheck to see detailed errors

Navigation links broken

If navigation links don't work:

Internal links should start with / (e.g., /pricing)
External links need full URL (e.g., https://example.com)
Anchor links for same-page sections use # (e.g., /#features)

Related Guides

Customize Theme Colors

Learn how to customize the color palette to match your brand identity using CSS variables

Customize UI Components

Fine-tune button styles, cards, inputs, and other UI components to match your design

Next Steps

Now that you've customized your branding, you might want to:

Customize Theme Colors - Update the color palette to match your brand
Customize UI Components - Fine-tune button styles, cards, and other components
Production Deployment - Deploy your branded app to production

Make the SaaS starter kit truly yours by customizing the site name, tagline, social links, and adding your company logo. All branding is centralized in one configuration file for easy updates.

ℹ️

Prerequisites

Your company logo files (SVG format recommended)
Company name, tagline, and website URL
Social media links (Twitter, GitHub, etc.)
Text editor to modify src/config/site.config.ts

Understanding the Branding System

All branding elements are managed through a centralized configuration file (src/config/site.config.ts) that controls:

Site Metadata: Name, description, tagline, URL
Navigation: Header and footer links
Social Links: Twitter, GitHub, and other social profiles
Landing Page Content: Headlines, features, calls-to-action
Fonts: Typography choices for body, headings, and code

Step-by-Step Branding Customization

Update Site Metadata

Open src/config/site.config.ts and update the metadata section with your company information:

src/config/site.config.ts

1export const siteConfig: SiteConfig = {
2  metadata: {
3    name: "Your Company Name",          // Replace with your brand
4    description: "Your product description for SEO",
5    tagline: "Your memorable tagline",  // Appears in footer
6    url: "https://your-domain.com",     // Production URL
7    socialLinks: {
8      twitter: "https://twitter.com/your-handle",
9      github: "https://github.com/your-repo",
10      // Add more: linkedin, facebook, instagram, etc.
11    },
12  },
13  // ... rest of config
14};

💡

SEO Tip

The description field is used for meta tags. Keep it concise (150-160 characters) and include relevant keywords for search engines.

Customize Landing Page Content

Update the hero section to reflect your product's value proposition:

src/config/site.config.ts

1sections: {
2  order: ["hero", "features", "techStack"],
3 
4  hero: {
5    enabled: true,
6    headline: "Your Product's Main Value Prop",
7    subheadline: "Explain what your product does and who it's for",
8    primaryCta: {
9      label: "Get Started",  // Button text
10      href: "/login",        // Where it leads
11    },
12  },
13  // ... rest of sections
14}

Before & After Example:

Before (default):

"Ship your SaaS faster"

After (customized):

"Manage your team's projects effortlessly"

Customize Features Section

Update the features to highlight YOUR product's capabilities:

src/config/site.config.ts

1features: {
2  enabled: true,
3  headline: "Everything you need to succeed",
4  subheadline: "Built for modern teams",
5  items: [
6    {
7      icon: "Zap",  // lucide-react icon name
8      title: "Lightning Fast",
9      description: "Optimized for speed and performance"
10    },
11    {
12      icon: "Shield",
13      title: "Secure by Default",
14      description: "Enterprise-grade security built in"
15    },
16    // Add or modify features as needed
17  ],
18},

ℹ️

Available Icons

The starter uses lucide-react for icons. Browse the icon library and use any icon name (e.g., "Rocket", "Users", "Star").

Add Your Logo

Replace the default logo by adding your logo file to the public/ directory:

📁public

📄logo.svg

📄logo-dark.svg

📄favicon.ico

Recommended formats:

SVG: Best for logos (scalable, small file size)
PNG: Alternative if SVG not available (use 2x resolution for retina)
Dark mode: Provide a separate logo for dark backgrounds (optional)

💡

Logo Dimensions

Recommended size: 120-200px wide, 40-60px tall. The header will automatically scale it to fit.

Update Navigation Links

Customize header and footer navigation to match your needs:

src/config/site.config.ts

1navigation: {
2  header: [
3    { label: "Features", href: "/#features" },
4    { label: "Pricing", href: "/pricing" },
5    { label: "Blog", href: "/blog" },       // Add new links
6    { label: "Docs", href: "/docs" },
7  ],
8  footer: {
9    links: [
10      { label: "Privacy Policy", href: "/privacy" },
11      { label: "Terms of Service", href: "/terms" },
12      { label: "Contact", href: "/contact" },  // Add more links
13    ],
14    showSocialLinks: true,  // Enable social icons in footer
15    copyrightText: "© 2025 Your Company Name. All rights reserved.",
16  },
17},

Customize Typography (Optional)

Change the fonts to match your brand identity. Popular options include Inter, Poppins, Roboto, and Montserrat:

src/config/site.config.ts

1fonts: {
2  sans: "Inter",           // Body text font
3  heading: "Poppins",      // Optional: different font for headings
4  mono: "JetBrains Mono",  // Code blocks and monospace
5},

⚠️

Font Loading

Make sure to import custom fonts in src/app/layout.tsx if you're using Google Fonts or other font providers. The starter includes Geist Sans and Geist Mono by default.

Advanced Customization

Section Reordering

Change the order of landing page sections by modifying the order array:

src/config/site.config.ts

1sections: {
2  // Change the order to match your priorities
3  order: ["hero", "pricing", "features", "faq", "cta"],
4 
5  // Enable/disable specific sections
6  pricing: { enabled: true },
7  faq: { enabled: true },
8  cta: { enabled: true },
9}

Favicon and Metadata

Configure your favicon in src/config/site.config.ts:

src/config/site.config.ts

1metadata: {
2  name: "Your Company Name",
3  shortName: "Your Company",
4  // icon: "/favicon.ico", // Uncomment to display in browser tab
5  description: "Your product description",
6  // ...
7},

Then add your favicon file to the public/ folder (e.g., public/favicon.ico).

Custom Og Image

Create a custom Open Graph image (1200x630px) for social media sharing:

Design an image with your logo, tagline, and branding (1200x630px)
Save as public/og-image.png
Update the metadata in src/app/layout.tsx (shown above)
Test with metatags.io

Before & After Examples

Before (Default)

Name: SaaS Starter

Tagline: Ship your SaaS faster

Hero: "A production-ready B2C SaaS starter..."

CTA: Get Started

After (Customized)

Name: ProjectFlow

Tagline: Manage projects effortlessly

Hero: "Streamline your team's workflow with..."

CTA: Start Free Trial

💡

Visual Preview

After making changes, preview your branding by visiting:

Landing page: http://localhost:3000
Pricing page: http://localhost:3000/pricing
Dashboard: http://localhost:3000/app/dashboard

Troubleshooting

Changes not appearing

If your branding updates don't show up:

Make sure you saved src/config/site.config.ts
Restart the dev server: npm run dev
Clear browser cache (Cmd+Shift+R / Ctrl+Shift+R)
Check the browser console for TypeScript errors

Logo not displaying correctly

Common logo issues and solutions:

File not found: Verify the logo file is in public/ directory
Wrong size: Resize to recommended dimensions (120-200px wide)
Poor quality: Use SVG format for best results
Dark mode issue: Provide separate logo-dark.svg file

TypeScript errors after editing config

If you see type errors:

Make sure all required fields are filled in
Check that icon names match lucide-react icons
Verify URLs start with http:// or https://
Run npm run typecheck to see detailed errors

Navigation links broken

If navigation links don't work:

Internal links should start with / (e.g., /pricing)
External links need full URL (e.g., https://example.com)
Anchor links for same-page sections use # (e.g., /#features)

Related Guides

Customize Theme Colors

Learn how to customize the color palette to match your brand identity using CSS variables

Customize UI Components

Fine-tune button styles, cards, inputs, and other UI components to match your design

Next Steps

Now that you've customized your branding, you might want to:

Customize Theme Colors - Update the color palette to match your brand
Customize UI Components - Fine-tune button styles, cards, and other components
Production Deployment - Deploy your branded app to production