# Project Configuration

Mantis 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.js`**

| **defaultPath**    | /dashboard/default   | string  | default path once login success                                                                                              |
| ------------------ | -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **fontFamily**     | 'Roboto', sans-serif | String  | set font family                                                                                                              |
| **mode**           | light                | String  | `light, dark`                                                                                                                |
| **i18n**           | en                   | String  | <p><code>en</code> - English</p><p><code>fr</code> - français</p><p><code>ro</code> - Română</p><p><code>zh</code> - 中国人</p> |
| **themeDirection** | ltr                  | boolean | set layout from right to left.                                                                                               |
| **miniDrawer**     | false                | boolean |                                                                                                                              |
| **container**      | true                 | boolean | see layout in stretch                                                                                                        |
| **presetColor**    | default              | string  | different preset for theme.                                                                                                  |

{% tabs %}
{% tab title="JavaScript" %}

```javascript

export const drawerWidth = 260;

export const twitterColor = '#1DA1F2';
export const facebookColor = '#3b5998';
export const linkedInColor = '#0e76a8';

// ==============================|| THEME CONFIG  ||============================== //

const config = {
  defaultPath: '/dashboard/analytics',
  fontFamily: `'Public Sans', sans-serif`,
  i18n: 'en',
  miniDrawer: false,
  container: true,
  mode: 'light',
  presetColor: 'default',
  themeDirection: 'ltr'
};

export default config;

```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
// types
import { DefaultConfigProps } from 'types/config';

export const drawerWidth = 260;

export const twitterColor = '#1DA1F2';
export const facebookColor = '#3b5998';
export const linkedInColor = '#0e76a8';

// ==============================|| THEME CONFIG  ||============================== //

const config: DefaultConfigProps = {
  defaultPath: '/dashboard/analytics',
  fontFamily: `'Public Sans', sans-serif`,
  i18n: 'en',
  miniDrawer: false,
  container: true,
  mode: 'light',
  presetColor: 'default',
  themeDirection: 'ltr'
};

export default config;

```

{% endtab %}
{% endtabs %}