material-web README

The project's README from github.com/material-components/material-web. As one markdown file: README.md.

Material Web

A collection of Material web components

Published on npm Join our Discord Test status npm Downloads jsDelivr hits (npm)

@material/web is a library of web components that helps build beautiful and accessible web applications. It uses Material 3, the latest version of Google's open-source design system.

Note: MWC is in maintenance mode pending new maintainers.

Resources

Quick start

Tip: Using Angular? We recommend using Angular Material components instead.

This code snippet is a buildless example that loads @material/web from a CDN. Check out the quick start guide to install and build for production.

<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <script type="importmap">
    {
      "imports": {
        "@material/web/": "https://esm.run/@material/web/"
      }
    }
  </script>
  <script type="module">
    import '@material/web/all.js';
    import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';

    document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
  </script>
</head>
<body>
  <h1 class="md-typescale-display-medium">Hello Material!</h1>
  <form>
    <p class="md-typescale-body-medium">Check out these controls in a form!</p>
    <md-checkbox></md-checkbox>
    <div>
      <md-radio name="group"></md-radio>
      <md-radio name="group"></md-radio>
      <md-radio name="group"></md-radio>
    </div>

    <md-outlined-text-field label="Favorite color" value="Purple"></md-outlined-text-field>

    <md-outlined-button type="reset">Reset</md-outlined-button>
  </form>
  <style>
    form {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
  </style>
</body>

material-web (material-components/material-web)

Searching Database…

11.3K ·GitHub
Material-web
What is this?Material Web (@material/web) is Google's library of web components implementing Material 3, the latest version of their open-source design system, for building accessible web UIs.
Is this a framework or a set of drop-in components?It's a library of standards-based web components built with Lit, not a full framework, so you can drop individual components into any web page or app.
How do I start using the components?The quickest start is a buildless example that loads @material/web straight from a CDN; for production you follow the quick start guide to install and build the components properly.
What does it depend on?The components are built on top of Lit (plus helpers like @lit/context, safevalues and tslib), so Lit is the core runtime dependency.
Is this project actively maintained?No — the README states it is in maintenance mode while waiting for new maintainers, so expect slow or no new feature development.
Should I use this if I'm building with Angular?The maintainers explicitly recommend using Angular Material components instead if you're on Angular, rather than this library.
Where does this run?It's framework-agnostic web components that run in the browser, usable in any web app regardless of the JS framework (except Angular, where Angular Material is preferred).
What is Material 3?It's Google's latest open-source design system, and this library is the official web-component implementation of its components and styling.
Can I check how big a component is before adding it?Yes, the project provides bundle size documentation so you can see the cost of each component before including it.
Does it work in every browser?The README points to dedicated browser support and FAQ docs, implying support varies and should be checked for your target browsers.
What are similar projects?mdb-ui-kit, lit, material-design-lite, material, pwa-install, material-components-web, semi-design, vuetify
Which topics is it in?material-you, material, material3, web-components, scss, material-design, design-system, google, accessibility, component-library, css, ui
Creator
material-components
Size
51.5 MB
Stars
11.3K
Updated
CommitOct 16Releasev2.5.0Jul 15
Age
8y
Commits · 90 Days