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