Project Configuration

Configuration option for entire DashboardKit Template

DashboardKit has a single source of truth for default configuration which lets users manage it effectively. It also makes it scalable for new configurations. you can set config like font, border, theme layout, locale, etc. All those can be configured at src\config\constant.ts

Option	Default	Data Type	Description
BASE_URL	/dashboard/sales	string	default path
BASE_TITLE	-	String	set page title
layout	vertical	String	vertical, horizontal
sidebarHide	false	Boolean	True, False
collapseMenu	false	Boolean	True, False
layoutType	dark-sidebar	String	light-sidebar, dark-sidebar
pageType	" "	String	app-dark-mode
colorBrand	" "	String	bg-primary, bg-danger, bg-warning, bg-info, bg-success, bg-dark
headerBackColor	" "	String	bg-primary, bg-danger, bg-warning, bg-info, bg-success, bg-dark
presetColor	preset-1	String	preset-1, preset-2, preset-3, preset-4, preset-5, preset-6, preset-7, preset-8, preset-9, preset-10
captionHide	true	Boolean	True, False
boxLayout	true	Boolean	True, False

Typescript

src/config/constant.ts

// imports from project
export const BASE_URL = '/dashboard/sales';
export const BASE_TITLE = ' | DashboardKit React Bootstrap 5 Admin Template';

export const BUY_NOW = '#';
export const DOCS_LINK = '#';
export const SUPPORT_LINK = 'https://phoenixcoded.authordesk.app/';

// -----------------------|| Application default Configuration ||-----------------------//

export const CONFIG = {
  layout: 'vertical', // vertical, horizontal
  sidebarHide: false,
  collapseMenu: false, // true for mini-menu
  layoutType: 'dark-sidebar', // light-sidebar
  pageType: '', // app-dark-mode
  colorBrand: '', // bg-primary, bg-danger, bg-warning, bg-info, bg-success, bg-dark
  headerBackColor: '', // bg-primary, bg-danger, bg-warning, bg-info, bg-success, bg-dark
  presetColor: 'preset-1', // preset-1, preset-2, preset-3, preset-4, preset-5, preset-6, preset-7, preset-8, preset-9, preset-10
  captionHide: true,
  boxLayout: true
};

Javascript