# mdb-angular-ui-kit is a Bootstrap 5 component set for Angular 22 > mdb-angular-ui-kit is an MIT licensed Angular library that adds Material Design styling and 700-plus components on top of Bootstrap 5, shipped as an ng-packagr library with Angular schematics. It suits Angular teams that want a ready-made design system, and it is a UI layer rather than an application framework. **mdbootstrap/mdb-angular-ui-kit** — Angular 21 & Bootstrap 5 & Material Design UI KIT - Repository: https://github.com/mdbootstrap/mdb-angular-ui-kit - Website: https://mdbootstrap.com/docs/angular/ - Stars: 1,143 · Forks: 271 - Language: SCSS - License: NOASSERTION - Published: 2026-10-19 · Updated: 2026-10-19 · Language: en - Canonical page: https://hysenlabs.com/projects/mdbootstrap-mdb-angular-ui-kit ## It is a component library, not a framework, and the packaging says so mdb-angular-ui-kit is the Angular part of the MDBootstrap family, a collection of free Bootstrap templates, themes, design tools and resources. The repository description calls it an Angular 21 and Bootstrap 5 and Material Design UI KIT, while the README headline is Bootstrap 5 and Angular 22 UI KIT with 700+ components and an MIT license, and the package.json dependencies pin the Angular packages at 22.1.2. That mismatch between the repository description and the actual dependency versions is worth flagging before anything else, because it is a symptom of how the project is versioned. The package version is 11.0.0, released on 2026-08-31, and it tracks Angular major versions rather than standing still. The previous major, 10.0.0, landed on 2026-02-23 and 9.1.0 on 2025-12-15. So the description on the repository is a version behind the code, which is normal for a repository description that is edited infrequently, and a reason to read package.json rather than the topics list when you are deciding whether the package supports your Angular version. The primary language of the repository is SCSS, which is the substance of the project. A Material Design layer on top of Bootstrap 5 is mostly a design token problem and a stylesheet problem, and the SCSS is where the tokens, the theming and the component styling live. The README positions the value in plain terms: simplicity and ease of use are key features of the MDB 5 Angular UI Kit, and you need only one minute to install and run it. The feature list is 700+ UI components, a super simple one minute installation, detailed docs and practical examples, lots of tutorials, a huge and active community, and an MIT license that is free for personal and commercial use. ## The ng-packagr build and the schematics are the two halves of the build The package.json scripts describe a library package rather than an application, and two of them matter for anyone integrating it. The build:lib script runs ng-packagr against projects/mdb-angular-ui-kit/ng-package.json with the production tsconfig, and then chains the schematics build. ng-packagr is the Angular library packaging tool, and using it means the output is a proper Angular package with an entry point, metadata and partial compilation, rather than a bundle of source you have to compile yourself. The schematics build is the other half and is the more interesting one. It compiles the schematics with tsc against tsconfig.schematics.json, and then copies three JSON files into the dist output: the ng-add schema, the collection, and the package file. The ng-add schematic is what runs when you add the package to an Angular project with ng add, and it is the piece that would set up your styles, your theme and the configuration the components need. The copy step is a plain cp of the schema.json, collection.json and package.json into dist/mdb-angular-ui-kit/schematics, which is the layout the Angular CLI expects to find. The dist layout is what makes the published package usable by both a bundler and the CLI's schematic runner. The rest of the scripts are the standard Angular workspace set. ng serve for development, ng build for the demo application, ng test and ng test --project mdb-angular-ui-kit for the library's own tests, ng lint, and ng e2e. The repository layout confirms the split. There is a projects/ directory holding the library project, an src/ directory for the demo application, an e2e/ directory, an angular.json workspace file, and separate tsconfig.app.json, tsconfig.spec.json and tsconfig.json. There is also a setup-vitest.ts and a test-config.helper.ts, which suggests the test setup has been moving towards Vitest, and a tslint.json alongside the modern eslint configuration elsewhere in the tree. ## The dependency list shows what Bootstrap compatibility actually costs The runtime dependencies are the honest measure of what adopting this package involves, and they are worth reading closely. The Angular core set is all at 22.1.2, which means the package expects a specific Angular major and a recent minor within it: animations, cdk, common, compiler, core, forms, platform-browser, platform-browser-dynamic and router. The Angular CDK is the one to pay attention to, because it is a substantial dependency on its own, and the Material components this kit is imitating are built on the CDK. Then there are three libraries that are not Angular. rxjs at 7.5.0, which every Angular application already has. zone.js at 0.15.0, the change detection runtime, which is also standard but has been optional in recent Angular versions. And tslib at 2.3.0, which the Angular build output requires. And there is one that is not a framework dependency at all: @fortawesome/fontawesome-free at 6.0.0. The kit ships the free Font Awesome icon set as a dependency, which is a design decision with a licence dimension. Bootstrap itself is not in the dependency list. That is significant, and it says something about the architecture. The kit does not vendor Bootstrap, so how the two interact is a question about the stylesheet pipeline rather than the JavaScript bundle. It also means the version of Bootstrap you get is one you control, which is what you want for a design system where the component CSS and the base framework CSS have to agree. The devDependencies are the Angular CLI and build tooling at 22.1.4, jasmine and the jasmine spec reporter for unit tests, and types for node and jasmine. ## Getting started is a documentation click, a zip, npm or a CDN The installation story in the README is unusually short, and that is both its selling point and its limitation. There is a link labelled Get Started in 1 minute, and it points at the installation documentation with the note that installation is simple via .zip, npm or cdnjs. Those three routes matter because they cover different situations. The .zip is for someone who wants the files directly, npm is for a normal application, and cdnjs is for a prototype that should not have a build step at all. The README is also careful to distinguish this kit from the other MDB products, which matters when you are evaluating the project rather than just installing it. MDB is a collection of free Bootstrap templates, themes, design tools and resources, and the Angular kit sits inside that collection. The README promotes MDBGO, a free hosting option with WordPress support, custom domains, SSL support, a free database, frontend and backend templates, a webpack starter, a git repository, and FTP and Jenkins support, along with a one-click WordPress shop integration. None of that is part of the library. The kit is the open source part; the hosting and the shop integration are separate commercial offerings. It is worth being clear about that when reading the README, because the page mixes documentation links for the library with links for the company's products, and the two have entirely different licences and support models. The learning material is also part of the offering. The README links a Bootstrap 5 tutorial, a crash course for beginners, and a YouTube channel with dozens of Bootstrap tutorials, and it points at a foundations tutorial introduction. For a component library whose selling point is that a developer can get a good-looking result in an afternoon, a structured tutorial path is a legitimate part of the product, and it is the part that a component library with a small API surface can afford to provide. ## The components are Bootstrap shapes with Material behaviour The demo section shows the kind of component you get, and the descriptions are more informative than the usual marketing copy. Buttons use the MDB custom button styles for actions in forms, dialogs and more, with support for multiple sizes and states. Spinners indicate the loading state of a component or page, and the detail that matters is that they are built entirely with HTML and CSS and no JavaScript. That is a deliberate design choice for a component library: a spinner that needs no JavaScript keeps working in contexts where the framework has not booted, in server-rendered output, and in the small number of places where a component is used outside the normal Angular lifecycle. That is the general pattern for the whole kit, and it is the reason it works on top of Bootstrap 5 rather than replacing it. Material Design's components are mostly presentational specifications: a card is a container with a shadow, a modal is a dialog with a scrim and a transition, a date picker is a calendar grid. Those can all be expressed in CSS over Bootstrap's grid and utilities, which means the kit adds a look and a set of behaviours without asking you to relearn a component API. The result is the 700+ component count. That number is large because Material Design specifies a great many small components, and each one is a variation on the same handful of primitives. The value of that count is real for a team that has to match a design specification, and the cost is a dependency surface and a learning curve for the whole catalogue rather than a handful of primitives. The README also carries the trust signals that a commercial component library needs: a stated count of 3,000,000+ developers and designers, and a table of companies and institutions using it, including NASA, Nike, Amazon, Sony, Samsung, Airbus, Yahoo, Deloitte, GE, KPMG, Unity and Ikea. Those claims are the vendor's own, and the licence is the part you can verify. ## The licence file and the version number are the two things to check The licensing picture has a wrinkle worth resolving before you ship. The README states the licence in several places as MIT, free for personal and commercial use, and the badge in the README points to a file named LICENSE in the repository. The project metadata, however, records the licence as a custom one that GitHub cannot classify, with a pointer to the LICENSE file. There is also a separate license.txt at the repository root, and a README.txt alongside README.md. So there are two licence-named files in the root, and the metadata does not resolve to a standard identifier. The likely explanation is that the LICENSE file carries the MIT text plus additional terms covering the free and pro tiers of the MDB products, which is a common arrangement for a vendor that ships a free library and sells extensions. The honest guidance is to read the LICENSE file before using the kit in a product, particularly if you use the components as part of a design system you distribute. The second thing to check is the version alignment. The package name is mdb-angular-ui-kit-free, and the free suffix is in the package name itself, which tells you the npm publication is the free edition and that a paid edition exists separately. The version is 11.0.0, matching the newest release, and the Angular dependencies are 22.1.2. The repository is not archived and the last push was on 2026-08-31, the same day as the 11.0.0 release, so the project is actively maintained and releases in step with Angular's own major cycle. The CHANGELOG.md at the root is where you would look for the details of what changed in a given major, and given that the kit is a large surface tracking a large framework, a major version bump is where the breaking changes live. ## Conclusion Adopt mdb-angular-ui-kit if you are on Angular 22 and want Material Design components that sit on Bootstrap 5 rather than a second component library alongside it. Do not adopt it if you want a lightweight approach, because the package pulls in the Angular CDK, zone.js and a large component set for what is fundamentally a styling and component layer. Before you install, check that the version matches your Angular major, since the dependency list targets 22.1.2 and the release line moves with Angular, and read the ng-add schematic, because that is what rewrites your styles and theme configuration. ## FAQ ### What does mdb-angular-ui-kit provide? It is a component library adding Material Design styling and 700+ components on top of Bootstrap 5 for Angular, with a one minute installation via .zip, npm or cdnjs, detailed documentation and practical examples. The npm package is published as mdb-angular-ui-kit-free. ### Which Angular version does mdb-angular-ui-kit support? The current package version is 11.0.0 and the dependencies pin the Angular packages at 22.1.2, while the README headline describes it as the Bootstrap 5 and Angular 22 UI KIT. The release line moves with Angular's own major versions, with 10.0.0 in February 2026 and 9.1.0 in December 2025. ### How is the mdb-angular-ui-kit library built and packaged? The build:lib script runs ng-packagr against projects/mdb-angular-ui-kit/ng-package.json with the production tsconfig and then builds the schematics, compiling them with tsc and copying the ng-add schema, collection and package JSON files into the dist output. The test and lint scripts use ng test, ng test --project mdb-angular-ui-kit, ng lint and ng e2e. ### What licence does mdb-angular-ui-kit use? The README describes it as MIT licensed and free for personal and commercial use, with a badge linking to the LICENSE file, though the project metadata records a custom licence that GitHub cannot classify and the repository root also contains a license.txt. Read the LICENSE file before redistributing, since a free tier and a pro edition both exist. ### Does the mdb-angular-ui-kit package include Bootstrap itself? No. The dependency list has the Angular packages, the Angular CDK, rxjs, zone.js, tslib and @fortawesome/fontawesome-free, but no Bootstrap. The kit styles Bootstrap rather than vendoring it, so the Bootstrap version in your project is the one you control. ## Sources - [Issues](https://github.com/mdbootstrap/mdb-angular-ui-kit/issues) - [mdbootstrap/mdb-angular-ui-kit on GitHub](https://github.com/mdbootstrap/mdb-angular-ui-kit) - [Project website](https://mdbootstrap.com/docs/angular/) - [README](https://github.com/mdbootstrap/mdb-angular-ui-kit/blob/master/README.md) - [Releases](https://github.com/mdbootstrap/mdb-angular-ui-kit/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/mdbootstrap-mdb-angular-ui-kit