Download & installation guide

Manual installation (zip package)

Step 1

Download the package

MDB 5 download

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!

Don't miss MDB Standard 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 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-free-standard

    Step 4

    Install the dependencies (inside the project directory):

            
            
        cd mdb5-free-standard
        npm install

    Step 5

    Run the app:

            
            
        npm start

    Step 6

    Publish when you're ready:

            
            
        mdb publish

    Vite Starter

    Installing MDB with Vite is very useful for experienced developers.

    Note: If you don't have MDB CLI installed yet, you can do it with NPM: npm install -g mdb-cli. Now log in with your MDB account, type: mdb login. If you don't have account yet you can create one using mdb register command. 

            
            
                mdb frontend init mdb5-free-standard-vite

    What using Vite actually gives:

    Install MDB Vite Starter

    GitHub

    You can also download MDB 5 directly from our GitHub.

    If you like - please do not forget to support us with your star :)

    MDB UI KIT GitHub

    NPM

    Prerequisites

    Before starting project make sure to install Node LTS (14.x.x recommended).

    Installation

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

    To install MDB UI KIT in your project easily type the following command in terminal: 

            
            
          npm i mdb-ui-kit

    Importing JS modules

    You can import the entire library or just individual modules:

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

    Importing CSS file

    To import MDB stylesheet please use the following syntax:

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

    Add Font Awesome and Roboto font:

    Copy the following code into the <head> tag in your HTML file:

            
            
        <!-- 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"
        />

    CDN

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

    Installation via CDN is one of the easiest methods of integrating MDB UI KIT with your project. Just copy the latest compiled JS script tag and CSS link tag from cdnjs or jsdelivr to the application.

    Copy the following code into the <head> tag in your HTML file:

            
            
        <!-- 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"
        />
        <!-- MDB -->
        <link
          href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/#[[latestVersion]]#/mdb.min.css"
          rel="stylesheet"
        />
      
        
    
            
            
          <!-- 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"
          />
          <!-- MDB -->
          <link
            href="https://cdn.jsdelivr.net/npm/mdb-ui-kit@#[[latestVersion]]#/css/mdb.min.css"
            rel="stylesheet"
          />

    Copy the following code into the <body> tag in your HTML file: 

            
            
        <!-- MDB -->
        <script
          type="text/javascript"
          src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/#[[latestVersion]]#/mdb.umd.min.js"
        ></script>
      
        
    
            
            
          <!-- MDB -->
          <script
            type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/mdb-ui-kit@#[[latestVersion]]#/js/mdb.umd.min.js"
          ></script>

    Starter templates

    We have prepared a collection of useful starter templates to help you get started with MDB.

    MDB Starter Templates