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 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
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:
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.
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