https://github.com/material-components/material-web

Material Design Web Components
https://github.com/material-components/material-web

component- design-system lit lit-element lit-html material material-design material-you material3 web web-components

Last synced: 5 days ago
JSON representation

Material Design Web Components

• Host: GitHub
• URL: https://github.com/material-components/material-web
• Owner: material-components
• License: apache-2.0
• Created: 2018-03-27T21:46:51.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2024-12-10T22:21:26.000Z (about 1 month ago)
• Last Synced: 2024-12-30T12:34:07.589Z (13 days ago)
• Topics: component-, design-system, lit, lit-element, lit-html, material, material-design, material-you, material3, web, web-components
• Language: TypeScript
• Homepage: https://material-web.dev
• Size: 49.2 MB
• Stars: 9,476
• Watchers: 197
• Forks: 905
• Open Issues: 145
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md
  • Support: docs/support.md
  • Roadmap: docs/roadmap.md

Awesome Lists containing this project

• awesome - material-components/material-web - Material Design Web Components (TypeScript)
• awesome-luooooob - material-components/material-web - Material Design Web Components (TypeScript)
• awesome-list - material-web - components | 2619 | (TypeScript)
• awesome-lit - Material Web Components - Material Design implemented as Web Components. (Design Systems)
• awesome-web-components - Material Web Components - Material Design implemented as Web Components. (Real World / Design Systems)
• StarryDivineSky - material-components/material-web
• awesome-starred - material-components/material-web - Material Design Web Components (web-components)

README

        
# Material Web



[![Published on npm](https://img.shields.io/npm/v/%40material%2Fweb)](https://www.npmjs.com/package/@material/web)

[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff&label=%23material)](https://lit.dev/discord/)

[![Test status](https://github.com/material-components/material-web/actions/workflows/test.yml/badge.svg)](https://github.com/material-components/material-web/actions/workflows/test.yml)

[![npm Downloads](https://img.shields.io/npm/dm/%40material%2Fweb?label=npm%20downloads)](https://npm-stat.com/charts.html?package=%40material%2Fweb)

[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/%40material%2Fweb)](https://www.jsdelivr.com/package/npm/@material/web?tab=stats)

`@material/web` is a library of

[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)

that helps build beautiful and accessible web applications. It uses

[Material 3](https://m3.material.io/), the latest version of Google's

open-source design system.

**Note:

[MWC is in maintenance mode pending new maintainers](https://github.com/material-components/material-web/discussions/5642).**

## Resources

-   [Introduction](./docs/intro.md)

-   [Roadmap](./docs/roadmap.md)

-   [Component docs](./docs/components/)

-   [Bundle size](./docs/size.md)

-   [Browser support and FAQ](./docs/support.md)

## Quick start

> Tip: Using Angular? We recommend using

> [Angular Material](https://material.angular.io/) components

> instead.

This code snippet is a buildless example that loads `@material/web` from a CDN.

Check out the [quick start](./docs/quick-start.md) guide to install and build

for production.

```html

  

  

    {

      "imports": {

        "@material/web/": "https://esm.run/@material/web/"

      }

    }

  

  

    import '@material/web/all.js';

    import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';

    document.adoptedStyleSheets.push(typescaleStyles.styleSheet);

  

  
Hello Material!

  

    
Check out these controls in a form!

    

    


      

      

      

    


    

    Reset

  

  

    form {

      display: flex;

      flex-direction: column;

      align-items: flex-start;

      gap: 16px;

    }

  

```