Material-UI is a CSS framework and a set of React components that implement Google's Material Design specification.

Check out our documentation site for live examples. It's still a work in progress, but hopefully you can see where we're headed.

Material-UI is available as an npm package.

npm install material-ui

Use browserify and reactify for dependency management and JSX transformation. The CSS framework is written in Less, so you'll need to compile that as well.

Once material-ui is included in your project, you can use the components this way:

/**
 * @jsx React.DOM
 */

var React = require('react'),
  mui = require('material-ui'),
  PaperButton = mui.PaperButton;

var SomeAwesomeComponent = React.createClass({

  render: function() {
    return (
    	<PaperButton type={PaperButton.Types.FLAT} label="Default" />
    );
  }

});

module.exports = SomeAwesomeComponent;

The styles are separated into 2 less files:

• dist/less/scaffolding.less
• dist/less/components.less

This allows you to override any variables defined in custom-variables.less without having to modify material-ui source files directly. For example, your main.less file could look something like this:

@import "node_modules/material-ui/dist/less/scaffolding.less";

//Define a custom less file to override any variables defined in scaffolding.less
@import "my-custom-overrides.less";

@import "node_modules/material-ui/dist/less/components.less";

Note that if you're using the version of material-ui from NPM, your imports will look like this:

@import "node_modules/material-ui/docs/dist/less/scaffolding.less";
@import "node_modules/material-ui/docs/dist/less/components.less";

Material-UI came about from our love of React and Google's Material Design. We're currently using it on a project at Call-Em-All and plan on adding to it and making it better. If you'd like to help, check out the docs folder. We'd greatly appreciate any contribution you make. :)