Website Configuration

The main configuration file that contains the core settings for the website.

MkSaaS boilerplate has already set up the default core settings for you, and you can customize the core settings in this file src/config/website.tsx.

src/config/website.tsx

export const websiteConfig: WebsiteConfig = {
  ui: {
    // UI settings
  },
  metadata: {
    // Metadata settings
  },
  features: {
    // Features settings
  },
  routes: {
    // Routes settings
  },
  analytics: {
    // Analytics settings
  },
  auth: {
    // Auth settings
  },
  i18n: {
    // Internationalization settings
  },
  blog: {
    // Blog settings
  },
  docs: {
    // Docs settings
  },
  mail: {
    // Mail settings
  },
  newsletter: {
    // Newsletter settings
  },
  storage: {
    // Storage settings
  },
  payment: {
    // Payment settings
  },
  price: {
    // Price settings
  },
  credits: {
    // Credits settings
  },
};

UI

Controls the appearance and branding of your website. The UI configuration consists of several subsections:

Theme

Controls the color theme of the website:

Property	Type	Description
`defaultTheme`	`'default' \| 'blue' \| 'green' \| 'amber' \| 'neutral'`	Sets the default color theme for the website
`enableSwitch`	`boolean`	When true, allows users to change the color theme

Example:

src/config/website.tsx

metadata: {
  theme: {
    defaultTheme: 'default', // Choose from: default, blue, green, amber, neutral
    enableSwitch: true,      // Allow users to switch themes
  },
  // ...
}

You can find more about customizing the theme in the Theme documentation.

Mode

Controls the light/dark mode settings:

Property	Type	Description
`defaultMode`	`'light' \| 'dark' \| 'system'`	Sets the default display mode
`enableSwitch`	`boolean`	When true, allows users to toggle between light/dark modes

Example:

src/config/website.tsx

metadata: {
  mode: {
    defaultMode: 'system', // Choose from: light, dark, system
    enableSwitch: true,    // Allow users to switch modes
  },
  // ...
}

Metadata

Controls the metadata of your website. The metadata configuration consists of several subsections:

Images

Defines the images used for branding and social sharing:

Property	Type	Description
`ogImage`	`string`	URL to the Open Graph image used for social media previews
`logoLight`	`string`	URL to your logo image for light mode
`logoDark`	`string`	URL to your logo image for dark mode

Example:

src/config/website.tsx

metadata: {
  images: {
    ogImage: '/og.png',      // Open Graph image for social sharing
    logoLight: '/logo.png',  // Logo displayed in light mode
    logoDark: '/logo-dark.png', // Logo displayed in dark mode
  },
  // ...
}

You can find more about customizing the images in the Images documentation.

Configure links to your social media profiles:

Property	Type	Description
`twitter`	`string`	URL to Twitter/X profile
`github`	`string`	URL to GitHub profile or repository
`discord`	`string`	URL to Discord server
`blueSky`	`string`	URL to BlueSky profile
`youtube`	`string`	URL to YouTube channel
`linkedin`	`string`	URL to LinkedIn profile or page
`facebook`	`string`	URL to Facebook page
`instagram`	`string`	URL to Instagram profile
`tiktok`	`string`	URL to TikTok profile

Example:

src/config/website.tsx

metadata: {
  social: {
    github: 'https://github.com/YourOrganization',
    twitter: 'https://twitter.com/YourHandle',
    discord: 'https://discord.gg/your-invitation-code',
    youtube: 'https://youtube.com/@YourChannel',
    // Add other social platforms as needed
  },
  // ...
}

These social media links are used by the social-config.tsx file to generate the appropriate icon links across the website.

Features

Configure the features for some cases, for example, whether to show upgrade card or not:

Property	Type	Description
`enableDiscordWidget`	`boolean`	Whether to enable the Discord widget or not, deprecated, default is `false`
`enableUpgradeCard`	`boolean`	Whether to enable the upgrade card or not, default is `true`
`enableUpdateAvatar`	`boolean`	Whether to enable the update avatar or not, default is `true`
`enableAffonsoAffiliate`	`boolean`	Whether to enable the affonso affiliate or not, default is `false`
`enablePromotekitAffiliate`	`boolean`	Whether to enable the promotekit affiliate or not, default is `false`
`enableDatafastRevenueTrack`	`boolean`	Whether to enable the datafast revenue track or not, default is `false`
`enableCrispChat`	`boolean`	Whether to enable the Crisp chat or not, default is `true`
`enableTurnstileCaptcha`	`boolean`	Whether to enable the Cloudflare Turnstile captcha or not, default is `false`

Example:

src/config/website.tsx

features: {
  enableDiscordWidget: false,
  enableUpgradeCard: true,
  enableUpdateAvatar: true,
  enableAffonsoAffiliate: false,
  enablePromotekitAffiliate: false,
  enableDatafastRevenueTrack: false,
  enableCrispChat: process.env.NEXT_PUBLIC_DEMO_WEBSITE === 'true',
  enableTurnstileCaptcha: process.env.NEXT_PUBLIC_DEMO_WEBSITE === 'true',
}

You can find more about features configuration in the Affiliates, Captcha, Chatbox documentation.

Routes

Configure the routes for some cases, for example, the default login redirect route:

Property	Type	Description
`defaultLoginRedirect`	`string`	The default login redirect route, default is `/dashboard`

Example:

src/config/website.tsx

routes: {
  defaultLoginRedirect: '/settings/profile',
}

Analytics

Configure analytics services for your website:

Property	Type	Description
`enableVercelAnalytics`	`boolean`	When true, enables Vercel Web Analytics
`enableSpeedInsights`	`boolean`	When true, enables Vercel Speed Insights

Example:

src/config/website.tsx

analytics: {
  enableVercelAnalytics: true,  // Enable Vercel Web Analytics
  enableSpeedInsights: true,    // Enable Vercel Speed Insights
}

You can find more about analytics services in the Analytics documentation.

Auth

Configure authentication options for your website:

Property	Type	Description
`enableGoogleLogin`	`boolean`	When true, enables Google as a login provider
`enableGithubLogin`	`boolean`	When true, enables GitHub as a login provider
`enableCredentialLogin`	`boolean`	When true, enables credential login

Example:

src/config/website.tsx

auth: {
  enableGoogleLogin: true,  // Allow Google login
  enableGithubLogin: true,  // Allow GitHub login
  enableCredentialLogin: true,  // Allow credential login
}

MkSaaS supports multiple authentication providers by default. You can selectively disable specific providers using these configuration options:

Set enableGoogleLogin to false to remove Google as a login option
Set enableGithubLogin to false to remove GitHub as a login option
Set enableCredentialLogin to false to remove credential login

Note: Please ensure at least one login method is enabled, otherwise users will not be able to log in.

You can find more about authentication options in the Authentication documentation.

Internationalization (i18n)

Configure language support for your application:

Property	Type	Description
`defaultLocale`	`string`	Default language locale (e.g., 'en')
`locales`	`Record<string, { flag?: string; name: string }>`	Available languages with flag emoji and display name

MkSaaS supports multiple languages through its i18n system. Here's how to configure it:

src/config/website.tsx

i18n: {
  defaultLocale: 'en',
  locales: {
    en: {
      flag: '🇺🇸',
      name: 'English',
    },
    zh: {
      flag: '🇨🇳',
      name: '中文',
    },
    // Add more languages as needed
  },
}

For each supported language:

The key is the locale code (e.g., en, es, fr)
flag is an optional emoji to visually represent the language
name is the display name of the language in its native form

When adding a new language, you'll also need to create the corresponding translation files in the messages directory to provide translations for all UI strings. The application will use these translations to display content in the user's selected language.

You can find more about internationalization in the Internationalization documentation.

Blog

Configure the blog functionality:

Property	Type	Description
`enable`	`boolean`	Whether to enable the blog or not, default is `true`
`paginationSize`	`number`	Number of posts to display per page
`relatedPostsSize`	`number`	Number of related posts to show

Example:

src/config/website.tsx

blog: {
  enable: true,
  paginationSize: 6,
  relatedPostsSize: 3,
}

If you don't need the blog functionality, you can set enable to false, then the blog menus will not be shown in the navbar and footer, and the blog related pages will not be included in the sitemap.

You can find more about blog configuration in the Blog documentation.

Docs

Configure the docs functionality:

Property	Type	Description
`enable`	`boolean`	Whether to enable the docs or not, default is `true`

Example:

src/config/website.tsx

docs: {
  enable: true,
}

If you don't need the docs functionality, you can set enable to false, then the docs menus will not be shown in the navbar and footer, and the docs related pages will not be included in the sitemap.

You can find more about docs configuration in the Docs documentation.

Mail

Configure email services:

Property	Type	Description
`provider`	`'resend'`	Email service provider (currently only Resend is supported)
`contact`	`string`	Contact email for sending and receiving emails

Example:

mail: {
  provider: 'resend',
  contact: 'contact@example.com',
}

You can find more about mail configuration in the Email documentation.

Configure newsletter services:

Property	Type	Description
`provider`	`'resend'`	Newsletter service provider (currently only Resend is supported)
`autoSubscribeAfterSignUp`	`boolean`	Whether to automatically subscribe users after sign up

Example:

src/config/website.tsx

newsletter: {
  provider: 'resend',
  autoSubscribeAfterSignUp: true,
}

If you don't need the newsletter functionality, you can set enable to false, then the subscription form will not be shown in the home page and blog pages, and the subscription status will not be shown in the notification settings page.

You can find more about newsletter configuration in the Newsletter documentation.

Storage

Configure file storage:

Property	Type	Description
`enable`	`boolean`	Whether to enable the storage or not, default is `true`
`provider`	`'s3'`	Storage provider (currently only S3 is supported)

Example:

src/config/website.tsx

storage: {
  enable: true,
  provider: 's3',
}

If you don't need the storage functionality, you can set enable to false, then the update avatar functionality will not be available.

You can find more about storage configuration in the Storage documentation.

Payment

Configure payment processing services:

Property	Type	Description
`provider`	`'stripe'`	Payment processor (currently only Stripe is supported)

Example:

src/config/website.tsx

payment: {
  provider: 'stripe',
}

You can find more about payment configuration in the Payment documentation.

Price

Configure price plans:

Property	Type	Description
`plans`	`Record<string, PricePlan>`	Pricing plans configuration

Each price plan in the plans object can have the following properties:

Property	Type	Description
`id`	`string`	Unique identifier for the plan
`name`	`string?`	Display name of the plan
`description`	`string?`	Description of the plan features
`features`	`string[]?`	List of features included in this plan
`limits`	`string[]?`	List of limits for this plan
`prices`	`Price[]`	List of price options for the plan (monthly, yearly, one-time, etc.)
`isFree`	`boolean`	Whether this is a free plan
`isLifetime`	`boolean`	Whether this is a lifetime (one-time payment) plan
`popular`	`boolean?`	Whether to highlight this plan as popular
`disabled`	`boolean?`	Whether to disable this plan in UI
`credits`	`object?`	Credits configuration for this plan

The prices array contains objects with the following structure:

Property	Type	Description
`type`	`'subscription' \| 'one_time'`	Type of payment (subscription or one-time)
`priceId`	`string`	Stripe price ID (not product ID)
`amount`	`number`	Price amount in currency units (dollars, euros, etc.)
`currency`	`string`	Currency code (e.g., USD)
`interval`	`'month' \| 'year'?`	Billing interval for recurring payments
`trialPeriodDays`	`number?`	Free trial period in days
`allowPromotionCode`	`boolean?`	Whether to allow promotion code for this price
`disabled`	`boolean?`	Whether to disable this price in UI

The structure of credits object:

Property	Type	Description
`enable`	`boolean`	Whether to enable credits
`amount`	`number`	Number of credits
`expireDays`	`number?`	Expiration period (days) for the credits, optional

MkSaaS boilerplate uses three price plans by default: Free plan, Pro subscription plan (monthly/yearly), and Lifetime plan (one-time payment), as shown in the website configuration:

src/config/website.tsx

price: {
  plans: {
    free: {
      id: 'free',
      prices: [],
      isFree: true,
      isLifetime: false,
      credits: {
        enable: true,
        amount: 50,
        expireDays: 30,
      },
    },
    pro: {
      id: 'pro',
      prices: [
        {
          type: PaymentTypes.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_PRO_MONTHLY!,
          amount: 990,
          currency: 'USD',
          interval: PlanIntervals.MONTH,
        },
        {
          type: PaymentTypes.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_PRO_YEARLY!,
          amount: 9900,
          currency: 'USD',
          interval: PlanIntervals.YEAR,
        },
      ],
      isFree: false,
      isLifetime: false,
      popular: true,
      credits: {
        enable: true,
        amount: 1000,
        expireDays: 30,
      },
    },
    lifetime: {
      id: 'lifetime',
      prices: [
        {
          type: PaymentTypes.ONE_TIME,
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_LIFETIME!,
          amount: 19900,
          currency: 'USD',
          allowPromotionCode: true,
        },
      ],
      isFree: false,
      isLifetime: true,
      credits: {
        enable: true,
        amount: 1000,
        expireDays: 30,
      },
    },
  },
},

When to set plans or prices as disabled?

Set a plan to disabled: true when the plan is not available for new customers, but you need to keep it for existing users who have already purchased it.
Set a price to disabled: true when that specific pricing option is not available anymore, but existing subscribers on that price should still be able to see it in the billing page.

When displaying plans to users, the Price Configuration enhances these plans with translated content such as name, description, and feature lists.

You can find more about price configuration in the Payment documentation.

Credits

Configure the credit system for your website:

Property	Type	Description
`enableCredits`	`boolean`	Whether to enable the credit system
`enablePackagesForFreePlan`	`boolean`	Whether free plan users can purchase credits (by default, only paid users can buy extra credit packages)
`registerGiftCredits`	`object`	Configuration for registration gift credits
`packages`	`Record<string, CreditPackage>`	Configurable credit packages for purchase

The structure of registerGiftCredits object:

Property	Type	Description
`enable`	`boolean`	Whether to enable registration gift credits
`credits`	`number`	Number of credits given on registration
`expireDays`	`number?`	Expiry period (days) for the gifted credits, optional

The structure of each credit package in packages:

Property	Type	Description
`id`	`string`	Unique identifier for the package
`name`	`string?`	Display name of the package
`description`	`string?`	Description of the package
`popular`	`boolean`	Whether this package is recommended
`credits`	`number`	Number of credits included in the package
`price`	`object`	Price info, including priceId, amount, currency, allowPromotionCode
`expireDays`	`number?`	Validity period (days) for the credits, optional, undefined means no expire
`disabled`	`boolean?`	Whether to disable this package in UI, optional

Example:

src/config/website.tsx

credits: {
  enableCredits: false,
  enablePackagesForFreePlan: false,
  registerGiftCredits: {
    enable: true,
    credits: 50,
    expireDays: 30,
  },
  packages: {
    basic: {
      id: 'basic',
      popular: false,
      credits: 100,
      expireDays: 30,
      price: {
        priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_CREDITS_BASIC!,
        amount: 990,
        currency: 'USD',
        allowPromotionCode: true,
      },
    },
    // ... other credit packages ...
  },
},

You can find more about credits configuration in the Credits documentation.

UI

Theme

Mode

Metadata

Images

Features

Routes

Analytics

Auth

Internationalization (i18n)

Blog

Docs

Mail

Storage

Payment

Price

Credits

Video Tutorial

Next Steps

Navbar Configuration

Footer Configuration

Payment Integration

Price Configuration

Table of Contents