# @material/web

> Material web components

Latest version **2.5.0** (published 2026-07-15) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @material/web
pnpm add @material/web
yarn add @material/web
bun add @material/web
```

## Health

**Score 65/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.5.0 |
| Published | 2026-07-15 |
| First published | 2022-08-26 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 7.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11260 |
| Maintainers | azakus, emarquez, asyncliz, google-wombot |
| Keywords | material, material design, design system, components, web components, lit |

## Links

- npm: https://www.npmjs.com/package/@material/web
- Repository: https://github.com/material-components/material-web
- Homepage: https://github.com/material-components/material-web#readme
- Issues: https://github.com/material-components/material-web/issues
- npm.io page: https://npm.io/package/@material/web

## Dependencies (3)

- [lit](https://npm.io/package/lit.md) ^2.8.0 || ^3.0.0
- [tslib](https://npm.io/package/tslib.md) ^2.4.0
- [@lit/context](https://npm.io/package/@lit/context.md) ^1.1.6

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 2.5.0 (latest) — 2026-07-15
- 2.5.1-nightly.56a486b.0 (nightly) — 2026-09-16
- 2.5.1-nightly.a300d04.0 — 2026-09-12
- 2.5.1-nightly.f13c736.0 — 2026-09-11
- 2.5.1-nightly.c05b4b2.0 — 2026-08-29
- 2.5.1-nightly.cac9767.0 — 2026-08-22
- 2.5.1-nightly.e7b4db6.0 — 2026-08-18
- 2.5.1-nightly.23b638c.0 — 2026-08-05
- 2.5.1-nightly.12ec888.0 — 2026-08-04
- 2.5.1-nightly.70e259d.0 — 2026-07-25
- 2.5.1-nightly.efaa189.0 — 2026-07-22
- 2.5.1-nightly.b4de401.0 — 2026-07-16
- 2.4.2-nightly.e58e4e8.0 — 2026-07-15
- 2.4.2-nightly.b4af72e.0 — 2026-07-07
- 2.4.2-nightly.4413a6e.0 — 2026-06-29
- … 225 more at https://npm.io/package/@material/web/versions

## README

# Material Web

<img src="./docs/images/material-web.gif"
  title="Material web components"
  alt="A collection of Material web components"
  style="border-radius: 32px">

[![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)<!-- {.external} -->
that helps build beautiful and accessible web applications. It uses
[Material 3](https://m3.material.io/)<!-- {.external} -->, 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/)<!-- {.external} --> 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.

<!-- LINT.IfChange -->

```html
<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>
```

<!-- LINT.ThenChange(./g3doc/docs/quick-start.md) -->

---
_Source: https://npm.io/package/@material/web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._