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


            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!

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.

Don't miss MDB React updates! Join our mailing list & receive information whenever a new update is released.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Policy


    MDB CLI

    CLI installation is the most efficient way to use MDB. It enables options such as:

    • Free hosting (supports custom domains, SSL, FTP access)
    • Install any MDB package with a single command
    • Easy updates with a single command
    • Backend starter templates (Laravel, plain PHP, node.js & more)
    • WordPress setup in 3 minutes (blog, ecommerce or blank project)
    • Git repository for you and your team
    Install 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 :)

    MDB REACT UI KIT GitHub

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