Installation guide

Manual installation (zip package)

Step 1

Download the package

MDB ANGULAR UI KIT download

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!

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

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

    Advanced installation

    Prerequisites

    Before starting the project make sure to install Angular CLI (v16) and Node LTS (v16 or v18).

    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 6
    • decide whether to set up browser animations

    Step 2

    Launch your app

            
            
      ng serve -o

    NPM

    Prerequisites

    Before starting the project make sure to install Angular CLI (v16) and Node LTS (v16 or v18).

    Installation

    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:

    The tilde imports were deprecated in v3.0.0, please remove the ~ if you use this version (or later). 

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

    The tilde imports were deprecated in v3.0.0, please remove the ~ if you use this version (or later). 

            
            
      // Font Awesome
      @import '@fortawesome/fontawesome-free/css/all.css';

      // 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="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />