Installation guide

Manual installation (zip package)

Step 1

Download the package

MDB REACT UI KIT download

Step 2

Unzip downloaded package and open it in the code editor

Step 3

Install dependencies

• Terminal

        
            
            npm install
          
        
    

Step 4

Run the application

• Terminal

        
            
            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!

Note: Manual installation with a .zip package is the easiest way, but many useful features are not available there.
To use the full potential of MDB and all available options, we recommend installation through MDB CLI.

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 17+ 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
      
        
    

CSS import

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

        
            
        import 'mdb-react-ui-kit/dist/css/mdb.min.css'
      
        
    

Font Awesome

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

        
            
        <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
      
        
    

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

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"]
          },
        }