⚠️ The use of this Starter is at your own risk and assumes basic knowledge of Vite, JavaScript and CSS preprocessors. We recommend creating custom versions of MDB UI KIT and themes only for advanced developers.
npm install
A free version of MDB UI Kit is already included as a dependency, to upgrade it to PRO version install the package you own with the command below.
Pro Essential installation
npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
Pro Advanced installation
npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced
npm run start
npm run build
- Bundling via Vite v3.1.0
- ES6+ Support via babel-cli v7.18.10
- SASS Support via sass v1.54.8
- Linting via eslint-webpack-plugin v3.2.0
- Unit Testing via jest v29.0.1
- Code Formatting via prettier v2.7.1
my-project/
├── src/
│ ├── js/
│ ├── scss/
│ └── index.html
└── vite.config.js
You can import the entire library or just individual modules. The default import method is ES module import. his type of import requires using the initMDB method for all components that rely on the auto initiation used on the page.
import { Ripple, initMDB } from 'mdb-ui-kit/js/mdb.es.min.js'; // Import needed modules
window.Ripple = Ripple;
initMDB({ Ripple }) // Initialize imported modules to enable data-attribute init
Alternatively, you can import using UMD format. MDB in UMD format will work without adding more elements, but will lack treeshaking.
import * as mdb from 'mdb-ui-kit/js/mdb.umd.min.js'; // lib
import { Input } from 'mdb-ui-kit/js/mdb.umd.min.js'; // module
import { Input as CustomInput } from 'mdb-ui-kit/js/mdb.umd.min.js'; // module with custom name
To import MDB stylesheet please use the following syntax:
@import 'mdb-ui-kit/css/mdb.min.css';