The Easy Way to Add Material Design to Your Meteor App

by Nick Wientge

Differential loves Google’s Material Design. We were one of—if not the—first teams to attempt to integrate Meteor with Google’s Polymer Project. We have several client projects in the works that make extensive use of Material Design. For a team that is made up almost exclusively of developers, Material Design has given us a tremendous boost in productivity and quality of work. Here are a few packages we’ve found that make adding Material Design to our Meteor apps a cinch.

What about Polymer?

Polymer is a very powerful tool that brings webcomponents to all modern browsers. It also happens to have a very nice set of Material Design components. Polymer, however, is still under active development and requires a bit of a learning curve. For this article, we’ll stick to the easy way.



Materialize.css may be the most polished of all the Material Design CSS frameworks — but it gains extra points for not depending on Angular or React, and instead just including plain jQuery plugins that play nice with Meteor. Additionally, they have an official Meteor package!


Meteor User Accounts has a package for just about every UI framework in existence — and Materialize is no exception. With a single {{> atForm}} you can have a fully-functional, Material-Designed sign up flow:



One of my favorite combinations of packages for productivity are aldeed:simple-schema, aldeed:collection2 and aldeed:autoform . With these three packages you can consolidate all of your data model schemas and validations into a single place, and then expose these attributes as a functional, validatable, HTML form with a single call to {{> quickForm }}.

With the addition of gildaspk:autoform-materialize, that form can also be sport a slick Material Design theme:


Material Design Boilerplate

Want to see all of these package together in action? Check out the materialize branch of our meteor-boilerplate package or go to

Are there any Material Design Meteor packages you’d like to see us add to the Boilerplate? Let us know @BeDifferential!

Share Share on Twitter Share on Facebook Share on LinkedIn

How Can We Help?

If you’re a middle-market or enterprise level organization with a problem that might be solved through technology, we’d love to set up a 15-minute Discovery Call to see how we might help.

Contact Us