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!

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 Bootstrap logo Angular logo React logo Vue logo JavaScript logo jQuery
    • 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 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"]
              },
            }