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-uiUse 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:
- src/less/scaffolding.less
- src/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/src/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/src/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. :)