MDB 5 React Pro installation guide

Manual installation (zip package)

Step 1

Download the package from orders.

Step 2

Unzip downloaded package and open it in the code editor.

Step 3

Install dependencies.

npm install

Step 4

Run the application.

npm start

Step 5

Explore our documentation (menu on the left). Choose components you like, copy it to your project and compose your website. And yes, it's that simple!

NPM

Keep in mind that the Single Use license does not allow installation via gitlab link. The only option for this type of package is manual installation.

Prerequisites

Before starting the project make sure to generate gitlab access token. and also make sure to install Node LTS (12.x.x or higher).

If you want to use package from npm you have to create a project with React. We recommend creating an app with create-react-app from react for begginers.

Step 1

Create React App. We are using React 18+ version.

npx create-react-app my-app

Step 2

Navigate to app's directory

cd my-app

MDB installation

Step 1

Setup MDB

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential

Font Awesome

Install Font Awesome.

npm i @fortawesome/fontawesome-free

CSS import

Add the following lines in your index.js file before the App.js file import:

import 'mdb-react-ui-kit/dist/css/mdb.min.css';
import "@fortawesome/fontawesome-free/css/all.min.css";

Roboto font

Add the following line in public/index.html file inside

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />

Set font family in globally css file for example src/index.css inside src folder as in the example:

body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

Step 2

Launch your app

npm start

Typescript implementation

We didn't put types for this library on DefinitelyTyped yet so if you want use mdb-react-ui-kit in your ts project you have to add a declaration module with types.

In our documentation, we use TypeScript syntax. You can have some warnings without it, but the code will always work as expected.

This instruction was tested with create-react-app with typescript template.. Below are showed dependencies used to test typescript implementation.

...
"dependencies": {
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "@types/jest": "^26.0.15",
  "@types/node": "^12.0.0",
  "@types/react": "^16.9.53",
  "@types/react-dom": "^16.9.8",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-scripts": "4.0.1",
  "typescript": "^4.0.3",
  "web-vitals": "^0.2.4",
},
...

First, you have to create a new folder inside your project. You can create in the root directory.

mkdir typings

Inside the typings folder, you have to add a new folder with mdb-react-ui-kit name. After that you have to create new d.ts file inside mdb-react-ui-kit folder.

cd typings

mkdir mdb-react-ui-kit

cd mdb-react-ui-kit

touch index.d.ts

Inside new d.ts file you have to create a declaration module for mdb-react-ui-kit.

declaration module 'mdb-react-ui-kit'{
  ...
}

Now you have to add types declaration for this file. If you installed mdb-react-ui-kit, you can find types inside node_modules/mdb-react-ui-kit/dist/index.d.ts. You have to copy everything to declaration module for mdb-react-ui-kit without export {...} at the bottom of the page.

In your tsconfig file in typeRoots option, you have to add the path to mdb-react-ui-kit types.

{
  "compilerOptions": {
    ...,
    "typeRoots": ["./node_modules/@types", "./typings"]
  },
}

Install specific version

When you install MDB from our GitLab server, the latest version of the library will be downloaded by default. You can add #version_number at the end of the installation command in order to install specific MDB version.

npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential#1.2.0