{"id":13772234,"url":"https://github.com/mdbootstrap/mdb-webpack-starter","last_synced_at":"2026-04-02T18:30:07.859Z","repository":{"id":54700499,"uuid":"276889009","full_name":"mdbootstrap/mdb-webpack-starter","owner":"mdbootstrap","description":"Webpack Starter for Material Design for Bootstrap UI Kit based on the latest Bootstrap 5.","archived":false,"fork":false,"pushed_at":"2022-07-13T11:29:29.000Z","size":113,"stargazers_count":59,"open_issues_count":2,"forks_count":33,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-11T04:32:07.044Z","etag":null,"topics":["bootstrap","bootstrap5","material-design","starter","webpack"],"latest_commit_sha":null,"homepage":"https://mdbootstrap.com/docs/standard/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-03T11:57:53.000Z","updated_at":"2025-02-25T06:23:58.000Z","dependencies_parsed_at":"2022-08-14T00:30:31.882Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/mdb-webpack-starter","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/mdbootstrap/mdb-webpack-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmdb-webpack-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmdb-webpack-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmdb-webpack-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmdb-webpack-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/mdb-webpack-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmdb-webpack-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31312908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap5","material-design","starter","webpack"],"created_at":"2024-08-03T17:01:01.627Z","updated_at":"2026-04-02T18:30:07.830Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png)\n\n# MDB 5 Webpack Starter\n\n### Webpack boilerplate for Bootstrap 5 \u0026 Material Design 2.0 UI Kit\n\n**[\u003e\u003e Support MDB 5 with a STAR](https://github.com/mdbootstrap/mdb-ui-kit/)**\n\n**[\u003e\u003e MDB 5 Demo](https://mdbootstrap.com/docs/standard/#demo)**\n\n\u003ca href=\"https://npmcharts.com/compare/mdbootstrap?minimal=true\"\u003e \u003cimg src=\"https://img.shields.io/npm/dm/mdbootstrap.svg?label=MDB%20Downloads\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-green.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003ca href=\"https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/jquery/\u0026hashtags=javascript,code,webdesign,bootstrap\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\u0026label=Let%20us%20know%20you%20were%20here%21\u0026\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/watch?v=c9B4TPnak1A\u0026t=6s\"\u003e\u003cimg alt=\"YouTube Video Views\" src=\"https://img.shields.io/youtube/views/c9B4TPnak1A?label=Bootstrap%205%20Tutorial%20Views\u0026style=social\"\u003e\u003c/a\u003e\n\n___\n\n\u003e :warning: The 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 only for advanced developers.\n\n___\n\n### Installation\n```\nnpm install\n```\n\n\u003e **Pro Essential installation**\n\u003e ```\n\u003e npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential\n\u003e ```\n\n\u003e **Pro Advanced installation**\n\u003e ```\n\u003e npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced\n\u003e ```\n\n### Dev Server\n```\nnpm start\n```\n\n### Build\n```\nnpm run build\n```\n\n### Features:\n\n* Bundling via [webpack](https://github.com/webpack/webpack)\n* ES6+ Support via [babel](https://babeljs.io/)\n* SASS Support via [sass-loader](https://github.com/jtangelder/sass-loader)\n* Linting via [eslint-loader](https://github.com/MoOx/eslint-loader)\n* Unit Testing via [jest](https://github.com/facebook/jest)\n* Code Formatting via [prettier](https://github.com/prettier/prettier)\n\n### Files structure:\n\n```\n.\n├── src\n│   ├── img/\n│   ├── js/\n│   ├── scss/\n│   ├── mdb/\n│   └── index.html\n├── webpack\n│   ├── webpack.common.js\n│   ├── webpack.config.dev.js\n│   ├── webpack.config.prod.js\n│   └── mdb/\n│       ├── webpack.common.mdb.js\n│       ├── webpack.config.mdb.dev.js\n│       └── webpack.config.mdb.prod.js\n└── dist/\n```\n\u003cbr\u003e\u003cbr\u003e\n\n___\n\n# MDB UI KIT\n\n### Importing JS modules\nYou can import the entire library or just individual modules:\n```\nimport * as mdb from 'mdb-ui-kit'; // lib\nimport { Input } from 'mdb-ui-kit'; // module\nimport { Input as CustomInput } from 'mdb-ui-kit'; // module with custom name\n```\n\n### Importing CSS file\nTo import MDB stylesheet please use the following syntax:\n```\n@import '~mdb-ui-kit/css/mdb.min.css';\n```\n\u003cbr\u003e\u003cbr\u003e\n\n___\n\n# CUSTOM VERSION OF MDB UI KIT\nIt is possible to prepare a custom version of MDB UI KIT. It can be useful when the project uses only several modules of our library and you want to reduce the size of the compiled files. To achieve this, follow the steps:\n\n```\nnpm install\n```\n\n\u003e **Pro Essential installation**\n\u003e ```\n\u003e npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential\n\u003e ```\n\n\u003e **Pro Advanced installation**\n\u003e ```\n\u003e npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced\n\u003e ```\n\n```\nnpm run getMDBsrc\n```\n\n### Importing JS components\nCopy the content from mdb/js/mdb.free.js or mdb/js/mdb.pro.js to src/js/index.js file. Pick only the components you need and update path to the mdb dir. Here's an example:\n\n```\nimport Carousel from '../../mdb/js/free/carousel';\n\nexport { Carousel };\n```\n\n\u003e **Pro Advanced paths**\n\u003e\n\u003e For the Pro Advanced package the __/mdb__ folder will contain two subfolders: __/mdb__ and __/plugins__, so for our needs the paths to the scss and js files will have to contain duplicated __mdb/__ text. Here's an example for a carousel component: \n\u003e ```\n\u003e import Carousel from '../../mdb/mdb/js/free/carousel';\n\u003e ```\n\nSome components may require additional dependencies to be installed. Webpack should report this after starting a devServer.\n\n### Importing SCSS files\nSame as with js files, copy the content from mdb/scss/mdb.free.scss or mdb/scss/mdb.pro.scss to src/scss/index.scss. Remove the lines with the import of modules that you will not use and update the paths to point the mdb dir.\n\nKeep in mind that many scss files are related to each other. For example, a modal will need files for buttons, ripple, modal, close and transtions to work properly. We recommend that you only delete the files described by comments __BOOTSTRAP COMPONENTS__ and __MDB COMPONENTS__.\n\nExample path for carousel file:\n```\n@import '../../mdb/scss/free/carousel';\n```\n\n\u003e **Pro Advanced path**\n\u003e ```\n\u003e @import '../../mdb/mdb/scss/free/carousel';\n\u003e ```\n\n### Configuration\nWebpack config for MDB development is located in /webpack/mdb/ directory and index.html file is placed in /src/mdb/ directory.\n\n### Dev Server\n```\nnpm run startMDB\n```\n\n### Build\n```\nnpm run buildMDB\n```\n\u003cbr\u003e\u003cbr\u003e\n\n___\n\n# CUSTOM THEME\nWebpack Starter allows pro users to prepare a personalized theme for all UI KIT components. \n\n### Installation\n```\nnpm install\n```\n\n\u003e **Pro Essential installation**\n\u003e ```\n\u003e npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential\n\u003e ```\n\n\u003e **Pro Advanced installation**\n\u003e ```\n\u003e npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced\n\u003e ```\n\n### SCSS config\nCreating a new theme requires that you define primary and secondary colors for your application. We prepared functions and mixins that will help you to create a ready to use theme using these colors. Here's an example code:\n\n```\n@import '~mdb-ui-kit/src/scss/mdb.pro.scss';\n\n$my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme\n$my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme\n\n$my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors\n\n// include theme styles\n@include mdb-theme($my-theme);\n```","funding_links":[],"categories":["Useful Links"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fmdb-webpack-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Fmdb-webpack-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fmdb-webpack-starter/lists"}