Installation guide

Manual installation (zip package)

Step 1

Download the package


Step 2

Unzip downloaded package and open it in the code editor

Step 3

Install dependencies

          npm install

Step 4

Run the application

          ng serve -o

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!

Note: Manual installation with a .zip package is the easiest way, but many useful features are not available there.
To use the full potential of MDB and all available options, we recommend installation through MDB CLI.

Don't miss MDB Angular 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


    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
    Install MDB CLI

    Advanced installation


    Before starting the project make sure to install Angular CLI (12.x.x) and Node LTS (12.x.x or higher).

    Step 1

    Create a new Angular app. Choose SCSS stylesheet.

          ng new my-app

    Step 2

    Navigate to app's directory

          cd my-app

    MDB installation

    Step 1

    Setup MDB

          ng add mdb-angular-ui-kit
    • decide whether to set up Roboto font
    • decide whether to set up Font Awesome 5
    • decide whether to set up browser animations

    Step 2

    Launch your app

          ng serve -o



    Before starting the project make sure to install Angular CLI (12.x.x) and Node LTS (12.x.x or higher).


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

          npm i mdb-angular-ui-kit

    Module import

    Add imports of individual MDB modules to the app.module.ts to use specific components. For example to use checkbox:

          import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';
          @NgModule ({
            imports: [MdbCheckboxModule],

    CSS import

    Add MDB styles import to the styles.scss file:

          // MDB SCSS
          @import "~mdb-angular-ui-kit/assets/scss/mdb.scss";

    Font Awesome

    Install Font Awesome:

          npm i @fortawesome/fontawesome-free

    Add Font Awesome styles to the styles.scss file:

          // Font Awesome
          @import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
          @import "~@fortawesome/fontawesome-free/scss/solid.scss";
          @import "~@fortawesome/fontawesome-free/scss/regular.scss";
          @import "~@fortawesome/fontawesome-free/scss/brands.scss";
          // MDB SCSS
          @import "~mdb-angular-ui-kit/assets/scss/mdb.scss";

    Roboto font

    Add the following line in public/index.html file inside head section:

          <link href=",400,500,700&display=swap" rel="stylesheet" />