Skip to content
Branch: master
Go to file

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

Building from source

If you want to code on the library itself, or build it from source for other reasons, here are some tips:

  • Please run an npm install in the root directory first. The root directory contains git hooks and scripts for releasing/publishing new versions.
  • The library code is in the directory bundle. You need to run npm install there, before e.g. building (npm run build) or testing (npm run test) the material library.
  • The demo and documentation website is in the site directory. Before building, the site, you must have built the material bundle first.
  • Check the package.json files for other commands that can be used to build, debug, test, release, or publish the library.
  • Publishing a new bundle is handled by circleci. The commands for publishing/releasing a new version are in the root package.json. These commands create the appropriate tags and changes that are picked up by the circleci build to do an actual publish/deploy/distribution of a new version of the library.
  • Please use commit messages according to the Angular Commit Message Guidelines.
You can’t perform that action at this time.