Material components for React

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

Installation

From CDN

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

From package manager

npm i --save react-mdc-web

Theming

Default theme

• Include CSS with default theme into HTML page

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

• Or import it into JS/JSX file

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

Custom theme

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

Usage

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

More samples could be found on the Documentation Site

License

MIT, see LICENSE for details