# material-components-web
> Modular and customizable Material Design UI components for the web
Latest version **14.0.0** (published 2022-04-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install material-components-web
pnpm add material-components-web
yarn add material-components-web
bun add material-components-web
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; popular repo.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 14.0.0 |
| Published | 2022-04-28 |
| First published | 2016-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 49 |
| Unpacked size | 7.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17045 |
| Maintainers | material-admin, yefim, abhiomkar, azakus, bicknellr, aprigogin, patrickrodee, aomarks, emarquez, allanchen, esgonzalez, asyncliz, candysonya, ssuarez, taylorv |
| Keywords | material components, material design |
## Links
- npm: https://www.npmjs.com/package/material-components-web
- Repository: https://github.com/material-components/material-components-web
- Homepage: https://github.com/material-components/material-components-web#readme
- Issues: https://github.com/material-components/material-components-web/issues
- npm.io page: https://npm.io/package/material-components-web
## Dependencies (49)
- [@material/dom](https://npm.io/package/@material/dom.md) ^14.0.0
- [@material/fab](https://npm.io/package/@material/fab.md) ^14.0.0
- [@material/rtl](https://npm.io/package/@material/rtl.md) ^14.0.0
- [@material/tab](https://npm.io/package/@material/tab.md) ^14.0.0
- [@material/base](https://npm.io/package/@material/base.md) ^14.0.0
- [@material/card](https://npm.io/package/@material/card.md) ^14.0.0
- [@material/list](https://npm.io/package/@material/list.md) ^14.0.0
- [@material/menu](https://npm.io/package/@material/menu.md) ^14.0.0
- [@material/chips](https://npm.io/package/@material/chips.md) ^14.0.0
- [@material/radio](https://npm.io/package/@material/radio.md) ^14.0.0
- [@material/shape](https://npm.io/package/@material/shape.md) ^14.0.0
- [@material/theme](https://npm.io/package/@material/theme.md) ^14.0.0
- [@material/banner](https://npm.io/package/@material/banner.md) ^14.0.0
- [@material/button](https://npm.io/package/@material/button.md) ^14.0.0
- [@material/dialog](https://npm.io/package/@material/dialog.md) ^14.0.0
- [@material/drawer](https://npm.io/package/@material/drawer.md) ^14.0.0
- [@material/ripple](https://npm.io/package/@material/ripple.md) ^14.0.0
- [@material/select](https://npm.io/package/@material/select.md) ^14.0.0
- [@material/slider](https://npm.io/package/@material/slider.md) ^14.0.0
- [@material/switch](https://npm.io/package/@material/switch.md) ^14.0.0
- [@material/tokens](https://npm.io/package/@material/tokens.md) ^14.0.0
- [@material/density](https://npm.io/package/@material/density.md) ^14.0.0
- [@material/tab-bar](https://npm.io/package/@material/tab-bar.md) ^14.0.0
- [@material/tooltip](https://npm.io/package/@material/tooltip.md) ^14.0.0
- [@material/checkbox](https://npm.io/package/@material/checkbox.md) ^14.0.0
- [@material/snackbar](https://npm.io/package/@material/snackbar.md) ^14.0.0
- [@material/animation](https://npm.io/package/@material/animation.md) ^14.0.0
- [@material/auto-init](https://npm.io/package/@material/auto-init.md) ^14.0.0
- [@material/elevation](https://npm.io/package/@material/elevation.md) ^14.0.0
- [@material/textfield](https://npm.io/package/@material/textfield.md) ^14.0.0
- [@material/data-table](https://npm.io/package/@material/data-table.md) ^14.0.0
- [@material/focus-ring](https://npm.io/package/@material/focus-ring.md) ^14.0.0
- [@material/form-field](https://npm.io/package/@material/form-field.md) ^14.0.0
- [@material/image-list](https://npm.io/package/@material/image-list.md) ^14.0.0
- [@material/typography](https://npm.io/package/@material/typography.md) ^14.0.0
- [@material/icon-button](https://npm.io/package/@material/icon-button.md) ^14.0.0
- [@material/layout-grid](https://npm.io/package/@material/layout-grid.md) ^14.0.0
- [@material/line-ripple](https://npm.io/package/@material/line-ripple.md) ^14.0.0
- [@material/top-app-bar](https://npm.io/package/@material/top-app-bar.md) ^14.0.0
- [@material/menu-surface](https://npm.io/package/@material/menu-surface.md) ^14.0.0
- [@material/tab-scroller](https://npm.io/package/@material/tab-scroller.md) ^14.0.0
- [@material/touch-target](https://npm.io/package/@material/touch-target.md) ^14.0.0
- [@material/tab-indicator](https://npm.io/package/@material/tab-indicator.md) ^14.0.0
- [@material/floating-label](https://npm.io/package/@material/floating-label.md) ^14.0.0
- [@material/linear-progress](https://npm.io/package/@material/linear-progress.md) ^14.0.0
- [@material/notched-outline](https://npm.io/package/@material/notched-outline.md) ^14.0.0
- [@material/segmented-button](https://npm.io/package/@material/segmented-button.md) ^14.0.0
- [@material/circular-progress](https://npm.io/package/@material/circular-progress.md) ^14.0.0
- [@material/feature-targeting](https://npm.io/package/@material/feature-targeting.md) ^14.0.0
## Recent versions
- 14.0.0 (latest) — 2022-04-28
- 15.0.0-canary.423edc3dc.0 (canary) — 2024-06-26
- 12.0.0-nightly.778a0e8a.0 (nightly) — 2021-07-20
- 4.0.0-alpha.0 (next) — 2019-08-07
- 15.0.0-canary.cfec83c74.0 — 2024-05-20
- 15.0.0-canary.2f5b899bc.0 — 2024-05-20
- 15.0.0-canary.f80ac92b0.0 — 2024-05-02
- 15.0.0-canary.4b35cb7d0.0 — 2024-05-02
- 15.0.0-canary.65c10a622.0 — 2024-04-25
- 15.0.0-canary.311f29a60.0 — 2024-04-23
- 15.0.0-canary.5bebc0064.0 — 2024-04-11
- 15.0.0-canary.68edc03c6.0 — 2024-04-08
- 15.0.0-canary.453a6248a.0 — 2024-03-25
- 15.0.0-canary.819498d8c.0 — 2024-03-15
- 15.0.0-canary.c43b3438b.0 — 2024-02-23
- … 1690 more at https://npm.io/package/material-components-web/versions
## README
# Material Components Web (MDC Web)
This package contains the master library for Material Components Web. It simply wraps all of its
sibling packages up into one comprehensive library for convenience.
## Installation
```
npm install material-components-web
```
## Usage
### Including the Sass
```scss
@use "material-components-web/material-components-web";
```
### Including the Javascript
```js
import * as mdc from 'material-components-web';
const checkbox = new mdc.checkbox.MDCCheckbox(document.querySelector('.mdc-checkbox'));
// OR
import {checkbox} from 'material-components-web';
const checkbox = new checkbox.MDCCheckbox(document.querySelector('.mdc-checkbox'));
```
> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.
> NOTE: Since switch is a reserved word in JS, switch is instead named `switchControl`.
> NOTE: Built CSS files as well as UMD JS bundles will be available as part of the package.
### Auto-initialization of components
The `material-components-web` package automatically registers all MDC Web components with
[mdc-auto-init](../mdc-auto-init), making it dead simple to create and initialize components
with zero configuration or manual work.
For example, say you want to use an [icon button toggle](../mdc-icon-button). Simply render the necessary
DOM, and attach the `data-mdc-auto-init="MDCIconButtonToggle"` attribute.
```html
```
Then at the bottom of your html, insert this one-line script tag:
```html
```
This will automatically initialize the icon button toggle, as well as any other components marked with the
auto init data attribute. See [mdc-auto-init](../mdc-auto-init) for more info.
---
_Source: https://npm.io/package/material-components-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._