MkSaaS DocsConfiguration
Learn how to configure your MkSaaS website
This guide provides a detailed reference for configuring your MkSaaS website.
Configuration Structure
The configuration is split into several files in the src/config directory, each responsible for a specific aspect of the website.
Q: What is the difference between the website configuration in src/config/website.tsx and the other configuration files in src/config/xxx.tsx?
A: The website.tsx file defines the core settings for the website, excluding locale-specific information, while the other configuration files are used to define the locale-specific content of the website.
WebsiteConfig can be used in both client and server components, while other configuration files can only be used in the client components.
Configuration Files
The configuration files are used to define the structure and content of the website.
Website Configuration
Core settings for the website
Navbar Configuration
Configure the navigation menu in the header
Footer Configuration
Set up links and sections in the website footer
Sidebar Configuration
Customize the dashboard sidebar navigation
Avatar Configuration
Configure the user avatar dropdown menu
Social Configuration
Manage social media links and sharing options
Price Configuration
Define subscription plans and pricing options
Credits Configuration
Define credits plans and credits options
Shared Types
The configuration uses consistent types across different menus:
MenuItem and NestedMenuItem
Basic menu item with the following properties:
| Property | Type | Description |
|---|---|---|
title | string | Display text for the menu item |
description | string | Optional description for dropdown items |
icon | ReactNode | Optional icon component |
href | string | Link URL destination |
external | boolean | Whether the link opens in a new tab |
authorizeOnly | string[] | User roles that can see this item |
items | MenuItem[] | NestedMenuItem only, can have submenu items for dropdowns |
Best Practices
- Use the
Routesobject (insrc/routes.ts) for defining URLs to ensure consistency - Keep translations in the appropriate locale files (e.g.,
messages/en.json) and use the translation functions - Use consistent icons from the Lucide icon set
- For role-based items, use the
authorizeOnlyproperty to limit visibility - Client side components should use the functions (e.g.,
getNavbarLinks()) while server side components can import the raw configuration objects
Video Tutorial
Next Steps
Now that you understand the configuration structure, explore these related topics: