• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Adding API Routes
    • Change Authentication strategy
    • Fetching the signed in User
    • Reading a Document
    • Creating a Document
    • Configuring Plans
    • Project Configuration
    • Updating the Navigation menu
    • Adding a new translation string
    • Guarding an API Route
    • Adding Pages
    • Updating the Sidebar menu
    • Require Email Verification
    • Fetching the selected Organization
    • Reading a list of Documents
    • Updating a Document
    • Running the Stripe Webhook locally
    • Branding
    • Setting a Default Language
    • Dark Theme
    • Theming
    • Calling API Routes from the client
    • Deleting a Document
    • Updating the Logo
    • Adding a new language in the Next.js Firebase SaaS Kit
    • Checking CSRF Tokens
    • Passing data from server to client
    • Updating the Fonts
    • Adding Pages
    • Guarding Pages
    • Using Lemon Squeezy instead of Stripe
    • Updating the Favicons
    • Using the Language Switcher
    • Environment variables
    • Detect current Locale
    • Setting up Emails

Update your Makerkit application Branding

A unique branding is essential to any SaaS. Learn how to update your Makerkit application branding.

Most of the branding details of your SaaS will be stored in the main configuration file of your application. This file is located at src/configurations.ts.

The site object contains most of your branding details. You can update the following properties:

tsx
site: {
name: 'Awesomely - Your SaaS Title',
description: 'Your SaaS Description',
themeColor: '#ffffff',
themeColorDark: '#0a0a0a',
siteUrl: process.env.NEXT_PUBLIC_SITE_URL,
siteName: 'Awesomely',
twitterHandle: '',
githubHandle: '',
language: 'en',
convertKitFormId: '',
locale: process.env.NEXT_PUBLIC_DEFAULT_LOCALE,
},
  1. The name and description properties will be used in the meta tags of your application
  2. The themeColor and themeColorDark properties will be used to update the color of the browser bar on mobile devices.
  3. The siteName property is a short version of your SaaS title, without the subtitle.
  4. The twitterHandle and githubHandle properties will be used to link to your social media accounts (if you have any).
  5. The locale property is the default language of your application
  6. The language property is deprecated and will be removed in a future version of Makerkit. Please use the locale property instead.
  7. The convertKitFormId property is used to link your application to your ConvertKit account if you use the Newsletter form.

Design Branding

Please refer to the Theming section to learn how to update the design of your application.

On this page
  1. Design Branding