Topic: Help Installing v5 Manually

ntrinsec pro asked 1 year ago

Hello, I am reaching out for help installing a Single Use license manually following these instructions

I have successfully installed the package to my project by copying mdbreact-5.2.0.tgz into the project root, and adding "mdbreact": "./mdbreact-5.2.0.tgz" to the package.json file. Furthermore I am able to successfully import the components using this statement: import { MDBInput, MDBBtn, MDBSelect } from 'mdbreact'. However the styles are not correct making the entire form look wrong, and the button component seems to be styled correctly but the inputs are not. Are there any additional steps to correct this styling issue?

Sample of code:

        <p className="h5 text-center mb-4">Sign in</p>
        <div className="grey-text">
            label="Type your email"
          <MDBInput label="Type your password" icon="lock" group type="password" validate />
              { text: 'One', value: 1 },
              { text: 'Two', value: 2 },
              { text: 'Three', value: 3 },
              { text: 'Four', value: 4 },
              { text: 'Five', value: 5 },
              { text: 'Six', value: 6 },
              { text: 'Seven', value: 7 },
              { text: 'Eight', value: 8 }
        <div className="text-center">

Screenshot of resulting UI: enter image description here

Krzysztof Wilk staff commented 1 year ago


Do you have imported core CSS files in your index.js file?

Also, the documentation you are checking is wrong. A dedicated installation guide for the MDB4 React package is here:

ntrinsec pro commented 1 year ago

The link provided requires git lab access token on step 3. But our version of "pro" doesn't allow access to that.

Installing it the "free" way is missing most of the components from the ui-kit we were previously using. Are we meant to use both node modules?

Krzysztof Wilk staff commented 1 year ago


One more question - do you have access to our GitLab and mdb-react-ui-kit repository?

For now you can: 1. Download the zip package from your "Orders" tab on our page 2. Extract the "mdbreact-5.2.0.tgz" file to your project catalog 3. Update package json - add "mdbreact" dependency and link to the file above as a key (so i.e. "mdbreact": "./mdbreact-5.2.0.tgz" 4. Remove your package-lock.json (or yarn.lock) file and node_modules 5. Run yarn cache clean or npm cache clean --force to make sure that nothing will be installed from the cache 6. Install all dependencies once again 7. In the index.js file import '@fortawesome/fontawesome-free/css/all.min.css', 'bootstrap-css-only/css/bootstrap.min.css' and 'mdbreact/dist/css/mdb.css' CSS files 8. Run your app :)

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 4.0.0
  • Device: Macbook Pro (intel)
  • Browser: Chrome
  • OS: macOS
  • Provided sample code: Yes
  • Provided link: Yes