Material Design Components for React


  • Library could be installed from CDN. Include the library into your html page:

    <script src=""></script>

    Try it out on Codepen

  • Or from package manager:

     npm i --save react-mdc-web 
  • If you are going to use Material icons, don’t forget to include them:

    <link rel="stylesheet" href=""/>


  • Bundlers

    Import ‘react-mdc-web’, if you are using bundler, such as webpack or Browserify

    import {Card, CardHeader, CardTitle} from 'react-mdc-web/lib';

    Or default import to reduce chunks sizes:

    import Card from 'react-mdc-web/lib/Card/Card';
    import CardHeader from 'react-mdc-web/lib/Card/CardHeader';
    import CardTitle from 'react-mdc-web/lib/Card/CardTitle';
  • UMD build

    Library is available as ReactMdcWeb in the global context.

    const {Card, CardHeader, CardTitle} = ReactMdcWeb;
    const Demo = (props) => (
           <Card style={{width: '300px'}}>
                  Hello world!
    ReactDOM.render(<Demo />, document.getElementById('demo'))

    Try it out on Codepen