Material Components

Material Components

Material Components for the Web

Create beautiful apps with modular and customizable UI components.

  • Accurate & up to date

    Implement Material Design with pixel-perfect components, maintained by Google engineers and designers

  • Seamless integrations

    Use components designed to work in any context, allowing seamless integration with libraries like React, AngularJS, and server-side rendering

  • Industry standards

    Take advantage of components developed with minimal dependencies and tested for flexibility, accessibility, and internationalization

Getting Started

Get up and running with Material Components for web

  1. Install the library

    Start by installing the library from npm:

    npm install --save material-components-web

  2. Include the stylesheet

    Include the MDC-Web stylesheet in the head of your file

    <html class="mdc-typography">
  <head>
    <title>Material Components for the web</title>
    <link rel="stylesheet"
          href="node_modules/material-components-web/dist/material-components-web.css">
  </head>

  3. Add components

    Add components to the body of your HTML

      <body>
    <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
    <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
      <input type="text" class="mdc-textfield__input" id="demo-input">
      <label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
    </div>
  </body>

  4. Add scripts and instantiate

    Add the MDC-Web scripts and call MDC Auto Init.

    <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>

    A full example of the HTML could look like this:

    <!DOCTYPE html>
<html class="mdc-typography">
  <head>
    <title>Material Components for the web</title>
    <link rel="stylesheet"
          href="node_modules/material-components-web/dist/material-components-web.css">
  </head>
  <body>
    <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
    <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
      <input type="text" class="mdc-textfield__input" id="demo-input">
      <label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
    </div>
    <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
    <script>mdc.autoInit()</script>
  </body>
</html>

  5. What’s next?