MDC React

Material Components Web implemented in React.

Setup

Install the library using npm:

npm i mdc-react

If you plan on using the Sass files, you'll also need to install sass:

npm i -D sass

NOTE: MDC React (as well as MDC Web) uses the new Sass Module System. Unfortunately at this time the node-sass implementation does not support it. Please use the sass library.

Icons

To use Material Icons include them in your HTML:

<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">

Symbols (NEW)

To use Material Symbols include them in your HTML:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

The above snippet includes the default configuration for each axis, with weight at 400, optical size at 48, grade at 0 and fill (also 0.)

To configure the symbols follow the developer guide.

Usage

JS

To use the components just import what you need from the library:

import { Button } from 'mdc-react';

const App = () => {
    return (
        <div>
            <Button>Click me!</Button>
        </div>
    );
};

Alternatively you can import only the components you need:

import Button from 'mdc-react/button';
import Typography from 'mdc-react/typography';

const App = () => {
    return (
        <div>
            <Typography>Hello world!</Typography>
            <Button>Click me!</Button>
        </div>
    );
};

Sass

You can use all the styles:

@use 'path-to-node_modules/mdc-react';

or only the ones you need:

@use 'path-to-node_modules/mdc-react/src/button';
@use 'path-to-node_modules/mdc-react/src/typography';