Installation

linkInstallation

react-md is available as an npm package.

You can install with:

$ npm install -S react react-dom react-md

Bash

Once installed, the components can be accessed by react-md or react-md/lib and the styles from react-md/src/scss/_react-md.scss.

linkFonts

The Roboto font and material-icons should be included as well (or some equivalent). These fonts can be included via WebFontLoader or by locally hosting and using the provided Sass mixins to include them. See host-material-icons and host-google-font for more details.

linkExamples

Please see the examples folder for example project setups using create-react-app, next.js, webpack, and others.

linkUMD

react-md is also available as a UMD bundle. This can either be found in the dist folder or from unpkg.

/* index.js */
const { Card, CardTitle, CardText, CardActions, Button } = window.ReactMD;

class App extends React.Component {
  render() {
    return (
      <div className="md-grid">
        <Card className="md-cell">
          <CardTitle title="Hello, World!" />
          <CardText>
            Lorem ipsum... pretend more ...
          </CardText>
          <CardActions>
            <Button flat label="Action 1" />
            <Button flat label="Action 2" />
          </CardActions>
        </Card>
      </div>
    );
  }
}

ReactDOM.render(document.getElementById('app'), <App />);

Js
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head><link rel="stylesheet" href="https://unpkg.com/react-md@1.16.1/dist/react-md.indigo-pink.min.css"></head>
  <body>
    <script src="https://unpkg.com/react/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/react-addons-css-transition-group/dist/react-addons-css-transition-group.min.js"></script>
    <script src="https://unpkg.com/react-addons-transition-group/dist/react-addons-transition-group.min.js"></script>
    <script src="https://unpkg.com/react-md@1.16.1/dist/react-md.min.js"></script>
    <script src="/bundle.js"></script>
  </body>
</html>

HTML