Project Installation

To start using this design system you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).

If you do not want to use our template as base for your project, and want to integrate our template into your own project, please skip this part and the Live Production one, and go straight to Packages.

Install NodeJS LTS latest version from NodeJS Official Page (16 or above)
Unzip the downloaded file to a folder in your computer
Open your terminal
Go to your file project (where you’ve unzipped the product)
Run in terminal yarn install or npm install

Environment configuration

Change the .env.example in .env and add the necessary variables values
REACT_APP_URL needs the URL of your react project
REACT_APP_IS_DEMO set to false if you don't want to have any restrictions
REACT_APP_API_URL is used to set the API, it is the URL value of your Node API (for example https://node-json-api-pro.creative-tim.com/ from our Headless CSM with Exress.js)
set the REACT_APP_IMAGES if you use a local API
In package.json in the proxy variable add the right path to your API

Run the project

Then run yarn start or npm start
Navigate to https://localhost:3000
More information → React
More information → MUI
More information → create-react-app

Live Production

NOTE! Creative Tim unfortunately cannot help you with deploying your app. If you need help on deploying your app to gh-pages we are more than happy to help you with that, but unfortunately we have no other knowledge of deploying a Material-UI or a React app.

NOTE! Since we have used `create-react-app` to develop our product, when deploying your project you might need to delete the `homepage` prop from inside `package.json` file, or change it accordingly.

These are some free open source tutorial on how to deploy a create-react-app app on some servers. Please note that your project might need some additional configs to deploy it on these servers:

Packages

If you want to add our template over your own project, please add all contents of the package.json file to your own package.json file.

You will also need our base public/index.html and src/index.js (if you want to keep our routing system).

And the most important, our jsconfig.js file - in this file, we make it possible for usage of absolute imports, so instead of having to write import X from "../../../../path/to/X.js" you can write import X from "path/to/X.js" which has a more elegant touch, and it is shorter.

CSS

This product makes usage of emotion and sx prop, as our friends from MUI.

We’ve used the ThemeProvider inside src/App.js: Style Library Interoperability
We’ve used the CssBaseline inside src/App.js: CSS Baseline
We’ve used the styled utility inside src/components/* and src/examples/* files: Styled

If you are planning on adding our template into your own project, you will need to add our whole assets folder to your own project.

Starter Template

You will need to add to your mounting JS file (in our case it is src/App.js) the following imports:

And after that, you will also need to initialize the app with our theme:

we’ve also added RTL support, which comes with its own theme. To get started with the RTL, you can use:

You can also follow the instructions from the official MUI docs: MUI Right to Left

We’ve also added Dark Mode support, which comes with its own theme. To get started with the Dark Mode, you can use:

Fonts and Icons

If you’ve started a new project and are copying our product there, be sure to add the following lines of code inside your public/index.html file:

Important Globals

Material Dashboard React employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

Responsive meta tag

Material Design is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> inside the public/index.html file.

MUI components

MUI comes with some required dependencies, however, once you install @mui/material, all its dependencies are installed together with it, so you do not have to worry about this.