A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Clone or download


Blox Material makes it possible to create beautiful Angular apps with modular and customizable UI components, designed according to the Material Design Guidelines. It integrates Material Components for the Web (a Google project) with the Angular framework.

Follow Blox Material

Quick Links

npm License CircleCI Documentation


Component Documentation
button docs & demo
card docs & demo
checkbox docs & demo
chips docs & demo
dialog docs & demo
drawer docs & demo
elevation docs & demo
fab docs & demo
form-field see docs & demo for e.g. radio, and checkbox
grid-list deprecated by the Material Components Web team
icon-button docs & demo
icon-toggle docs & demo
linear-progress docs & demo
list docs & demo
menu docs & demo
radio docs & demo
ripple docs & demo
select docs & demo
slider docs & demo
snackbar docs & demo
switch docs & demo
tabs docs & demo
text-field docs & demo
toolbar docs & demo
top-app-bar docs & demo

The following material-components-web packages provide styling (scss, css) only. As such they can be consumed directly from your Angular app, and we see no reason to wrap their functionality in Angular components or directives. Just use the styles and sass mixins as documented by the material-components-web team:

Package Documentation
image-list image-list documentation
layout-grid layout-grid documentation
shape shape documentation
theme theme documentation
typography typography documentation