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
<link rel="stylesheet" href="https://unpkg.com/material-components-web@0.23.0/dist/material-components-web.min.css">
// 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:
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