MDB 5 Pro installation guide

Manual installation (zip package)

Step 1

Download the package from orders

Step 2

Unzip downloaded package and open it in the code editor

Step 3

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!

MDB 5 - Bootstrap 5 & Material Design Instalation

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 Logo
  • 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

Step 1

To start using MDB GO / CLI install it with one command:

npm install -g mdb-cli

Step 2

Log into the CLI using your MDB account:

Note: If you don't have account yet you can create one using mdb register command. 
mdb login

Step 3

Initialize a project:

mdb frontend init mdb5-essential-standard
mdb frontend init mdb5-advanced-standard

Step 4

Install the dependencies (inside the project directory):

cd mdb5-essential-standard
npm install
cd mdb5-advanced-standard
npm install

Step 5

Run the app:

npm start

Step 6

Publish when you're ready:

mdb publish

NPM

Keep in mind that the Single Use license does not allow installation via gitlab link. The only option for this type of package is manual installation.

Prerequisites

Before starting a project make sure to install Node LTS (14.x.x recommended) and generate gitlab access token.

Note: Installing MDB in an existing project is the same. Follow the instructions below to add MDB to your project.

Installation

To install MDB UI KIT in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation. 

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced

Importing JS modules

You can import the entire library or just individual modules: 

import {  Input, initMDB } from 'mdb-ui-kit/js/mdb.es.min.js';
initMDB({ Input });
import * as mdb from 'mdb-ui-kit/js/mdb.umd.min.js';
window.mdb = mdb;

Importing CSS file

To import MDB stylesheet please use the following syntax: 

@import '~mdb-ui-kit/css/mdb.min.css';

Vite

Keep in mind that the Single Use license does not allow installation via GitLab link. The only option for this type of package is manual installation.

Prerequisites

Before starting a project make sure to install Node LTS (14.x.x recommended) and generate GitLab access token.

Step 1

Initialize the project. Select a Vanilla framework during installation.

npm init vite@latest

Step 2

Navigate to the app's directory. Replace <vite-project> with your project name.

cd <vite-project>

Step 3

Install dependencies.

npm install

Step 4

To install MDB UI KIT in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation. 

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced

Step 5

Import CSS. Replace the content of the style.css file with the line below.

import 'mdb-ui-kit/css/mdb.min.css';

Step 6

Import JS. Replace the content of the main.js file with the code below. 

import { Ripple, initMDB } from 'mdb-ui-kit/js/mdb.es.min.js'; // Import needed modules

window.Ripple = Ripple;

initMDB({ Ripple }) // Initialize the imported modules to enable data-attribute initialization
// Import all of MDB's JS
import * as mdb from 'mdb-ui-kit/js/mdb.umd.min.js';
window.mdb = mdb;

Step 7

Replace the content of the index.html file with the the following code: 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MDB w/ Vite</title>
    <!-- Font Awesome -->
    <link
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    rel="stylesheet"
    />
    <!-- Google Fonts -->
    <link
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, MDB and Vite!</h1>
      <button class="btn btn-primary" data-mdb-ripple-init>Primary button</button>
    </div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

Step 8

Launch the application.

npm run dev

Install specific version

When you install MDB from our GitLab server, the latest version of the library will be downloaded by default. You can add #version_number at the end of the installation command in order to install specific MDB version. 

npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential#3.8.1