>> MDB 5 support with a STAR

>> Demo of MDB 5

⚠️ Use of this Starter is at your own risk and assumes basic knowledge of Webpack, JavaScript, and CSS preprocessors. We recommend creating custom versions of MDB UI KIT and themes for advanced developers only.

Pro Essential Installation

npm install git+

Pro Advanced installation

npm install git+

.
├── src
│   ├── img/
│   ├── js/
│   ├── scss/
│   ├── mdb/
│   └── index.html
├── webpack
│   ├── webpack.common.js
│   ├── webpack.config.dev.js
│   ├── webpack.config.prod.js
│   └── mdb/
│       ├── webpack.common.mdb.js
│       ├── webpack.config.mdb.dev.js
│       └── webpack.config.mdb.prod.js
└── dist/

You can import the entire library or just individual modules:

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
import { Input as CustomInput } from 'mdb-ui-kit'; // module with custom name

To import the MDB style sheet, use the following syntax:

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

It is possible to prepare a customized version of MDB UI KIT. It can be useful when the project uses only several modules from our library and you want to reduce the size of the compiled files. To achieve this, follow the steps:

Pro Essential Installation

npm install git+

Pro Advanced installation

npm install git+

Copy the contents of the file mdb/js/mdb.free.js or mdb/js/mdb.pro.js to the file src/js/index.js. Choose only the components you need and update the path to the mdb directory. Here is an example:

import Carousel from '../../mdb/js/free/carousel';

export { Carousel };

Pro advanced paths

For the Pro Advanced package the /mdb The folder will contain two subfolders: /mdb i /connectorsso for our needs the paths to the scss and js files will have to contain duplicates mdb/ text Here’s an example of a carousel component:

import Carousel from '../../mdb/mdb/js/free/carousel';

Some components may require the installation of additional dependencies. Webpack should report this after starting a devServer.

As with the js files, copy the contents of mdb/scss/mdb.free.scss or mdb/scss/mdb.pro.scss to src/scss/index.scss. Remove the lines importing modules you won’t be using and update the paths to point to the mdb directory.

Note that many scss files are related to each other. For example, a modal will need files for buttons, ripple, modal, closure, and transects to work properly. We recommend that you delete only the files described by the comments BOOTSTRAP COMPONENTS i MDB COMPONENTS.

Example path for carousel file:

@import '../../mdb/scss/free/carousel';

Pro Advanced route

@import '../../mdb/mdb/scss/free/carousel';

The Webpack configuration for MDB development is located in the /webpack/mdb/ directory and the index.html file is located in the /src/mdb/ directory.

Webpack Starter allows professional users to prepare a custom theme for all UI KIT components.

Pro Essential Installation

npm install git+

Pro Advanced installation

npm install git+

Creating a new theme requires you to define primary and secondary colors for your app. We’ve prepared features and mixins that will help you create a ready-to-use theme with these colors. Here is a sample code:

@import '~mdb-ui-kit/src/scss/mdb.pro.scss';

$my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
$my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme

$my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors

// include theme styles
@include mdb-theme($my-theme);