Installation guide

GitHub

You can also download MDB REACT UI KIT directly from our GitHub.

If you like - please do not forget to support us with your star :)

NPM

Prerequisites

Before starting the project make sure to install Node LTS (12.x.x or higher). We are using yarn to start a project.

If you want to use package from npm you have to have 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 mdb-react-ui-kit
      
        
    

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 head section:

        
            
        <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

Note: Since migration to Vite in MDB React version 6.0.0 and higher there is no need to do additional 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"]
          },
        }