Skip to content
Material Design (via Materialize) for Ember.js Apps
JavaScript HTML CSS Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Prettier Jan 4, 2018
blueprints feat: remove ember-new-computed dependency Mar 3, 2019
lib gh-pages demo in ember-1.12 Aug 17, 2015
tests feat: remove ember-new-computed dependency Mar 3, 2019
vendor Blanket coverage Aug 15, 2015
.bowerrc Initial Commit from Ember CLI v0.1.4 Dec 20, 2014
.ember-cli Initial Commit from Ember CLI v0.1.4 Dec 20, 2014
.eslintignore chore: update ember-try testing scenarios Nov 10, 2018
.eslintrc.js chore: revert eslint changes Nov 10, 2018
.gitignore chore: revert eslint changes Nov 10, 2018
.jscsrc Update dependencies (#322) Apr 22, 2016
.jshintrc Initial Commit from Ember CLI v0.1.4 Dec 20, 2014
.npmignore chore: revert eslint changes Nov 10, 2018
.template-lintrc.js chore: revert eslint changes Nov 10, 2018
.travis.yml chore: replace travis-deploy-once with travis-ci stage Dec 5, 2018
.watchmanconfig update ember-cli Feb 1, 2016 chore(release): 0.24.0 [skip ci] Mar 3, 2019 Initial Commit Dec 22, 2014 docs(readme): add Greenkeeper badge Jan 3, 2018
bower.json Ember 2.18 Jan 4, 2018
ember-cli-build.js Prettier Jan 4, 2018
index.js Ember 2.18 Jan 4, 2018
jsconfig.json Fix broken tests Jan 4, 2018
renovate.json feat: upgrade to ember 3 Nov 10, 2018
yarn.lock chore(deps): ember-ajax Jun 7, 2019


Greenkeeper badge

Build Status npm version Code Climate Coverage Status Ember Observer Score Book session on Codementor

An ember-cli addon for using Materialize (CSS Framework based on Material Design) in Ember applications.

Ember 2.0 Friendly

Materialize Version ~0.97.0


Which version do I use?

Ember.js version ember-cli-materialize version
< 1.10.0 Not supported
1.10.0 <= x < 1.11.0 v0.16.4
1.11.0 <= x < 1.13.0 v0.18.6
x >= 1.13.0 npm version

Main features

  • Imports Materialize sass (via ember-cli-sass) and fonts into your app.
  • It's a components library for all Materialize components


The online demo demonstrates all components with all possible options.

Or you can download the demo:

$ sudo npm install -g ember-cli
$ git clone
$ cd ember-cli-materialize
# install dependencies
$ npm install && bower install
# fire up local server
$ ember serve



Using SASS makes configuring the color scheme simple. Just make sure you import components/color and components/variables before materialize like the example below.

// Example app.scss
@import 'components/color';

// Custom color settings go here
$primary-color: color("pink", "lighten-2");

@import 'components/variables';
@import 'materialize';
@import 'ember-cli-materialize';

See the materialize docs on sass variables here.


Some of the library's defaults can be set via your config/environment.js file

module.exports = function(/* environment, appConfig */) {
  var ENV = {
    materializeDefaults: {
      modalIsFooterFixed:  false,
      buttonIconPosition:  'left',
      loaderSize:          'big',
      loaderMode:          'indeterminate',
      modalContainerId:    'materialize-modal-root-element',
      dropdownInDuration:  300,
      dropdownOutDuration: 300


$ ember install ember-cli-materialize


If you are using PhantomJS version 1.9.x as a test runner then after installing this addon you may experience test failures when running tests via ember test that you do not see in a browser.

This is due to the known limitation in PhantomJS 1.9 not providing a .bind method. To continue using PhantomJS simply either install ember-cli-es5-shim, which provides a .bind method, or try PhantomJS 2.x.


This addon is continuiously integrated against the following framework versions

Version Failures Allowed
Ember ~1.10.0 No
Ember ~1.11.0 No
Ember ~1.12.0 No
components/ember#release No
components/ember#beta No
components/ember#canary No



Special Thanks

Special thanks to Stefan Gasser for creating and originally maintaining this great library


ember-cli-materialize is released under the MIT License. See the bundled LICENSE file for details.


You can’t perform that action at this time.