React components based on styles from Material Design Components Web project. Components are written in React.js. Doesn't use MDC foundation classes.

From CDN

<script src="https://unpkg.com/react-mdc-web/out/react-mdc-web.js"></script>

From package manager

npm i --save react-mdc-web

• Include CSS with default theme into HTML page

  <link rel="stylesheet" href="https://unpkg.com/material-components-web@0.22.0/dist/material-components-web.min.css"> 

• Or import it into JS/JSX file

  // MyApp/index.js import 'material-components-web/dist/material-components-web.min.css';

Override default theme colors with Sass or with CSS Custom Properties, just follow these guides:

• Changing the theme with Sass
• Changing the theme with CSS Custom Properties

import React, { Component } from 'react' import {Card, CardHeader, CardTitle, CardText, CardActions, Button} from 'react-mdc-web/lib'; class MyComponent extends Component { render() { return ( <Card> <CardHeader> <CardTitle> Title goes here </CardTitle> </CardHeader> <CardText> Lorem ipsum dolor sit amet, sint adipiscing ius eu </CardText> <CardActions> <Button compact>Save</Button> <Button compact accent>Remove</Button> </CardActions> </Card> ); } }

More samples could be found on the Documentation Site

MIT, see LICENSE for details