Modular and customizable Material Design UI components for the web
Installations
npm install @material/animationDeveloper
Developer Guide
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
14.19.1
NPM Version
lerna/3.20.2/node@v14.19.1+x64 (linux)
Statistics
17,143 Stars
7,459 Commits
2,144 Forks
375 Watching
370 Branches
386 Contributors
Updated on 27 Nov 2024
Languages
TypeScript (53.58%)
SCSS (45.16%)
JavaScript (1.16%)
Shell (0.1%)
Total Downloads
Cumulative downloads
Total Downloads
112,971,717
Last day
-6.4%
190,237
Compared to previous day
Last week
0.8%
1,012,157
Compared to previous week
Last month
5.9%
4,245,111
Compared to previous month
Last year
71.2%
54,689,091
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Note:
This project is no longer actively maintained. While automated updates may still occur, the team will not be prioritizing new features or bug fixes, and those updates will be turned off in the future.
For Angular users, our friends at Angular Material moved away from this library, and they expect that this may actually allow for faster iteration - see their blog post for more information.
Material Components for the web
Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.
Material Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.
Material Components for the web is the successor to Material Design Lite. In addition to implementing the Material Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically architected for adaptability to various major web frameworks.
NOTE: Material Components Web tends to release breaking changes on a monthly basis, but follows semver so you can control when you incorporate them. We typically follow a 2-week release schedule which includes one major release per month with breaking changes, and intermediate patch releases with bug fixes.
Important links
- Getting Started Guide
- Demos (external site)
- Material on other frameworks
- Examples using Material Web
- Contributing
- Material Design Guidelines (external site)
- Supported browsers
- All Components
- Changelog
Quick start
Using via CDN
1<!-- Required styles for Material Web --> 2<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"> 3 4<!-- Render textfield component --> 5<label class="mdc-text-field mdc-text-field--filled"> 6 <span class="mdc-text-field__ripple"></span> 7 <span class="mdc-floating-label" id="my-label">Label</span> 8 <input type="text" class="mdc-text-field__input" aria-labelledby="my-label"> 9 <span class="mdc-line-ripple"></span> 10</label> 11 12<!-- Required Material Web JavaScript library --> 13<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script> 14<!-- Instantiate single textfield component rendered in the document --> 15<script> 16 mdc.textField.MDCTextField.attachTo(document.querySelector<HTMLElement>('.mdc-text-field')); 17</script>
Please see quick start demo on codepen for full example.
Using NPM
This guide assumes you have webpack configured to compile Sass into CSS. To configure webpack, please see the full getting started guide. You can also see the final code and result in the Material Starter Kit.
Install textfield node module to your project.
npm install @material/textfield
HTML
Sample usage of text field component. Please see Textfield component page for more options.
1<label class="mdc-text-field mdc-text-field--filled"> 2 <span class="mdc-text-field__ripple"></span> 3 <input type="text" class="mdc-text-field__input" aria-labelledby="my-label"> 4 <span class="mdc-floating-label" id="my-label">Label</span> 5 <span class="mdc-line-ripple"></span> 6</label>
CSS
Load styles required for text field component.
1@use "@material/floating-label/mdc-floating-label"; 2@use "@material/line-ripple/mdc-line-ripple"; 3@use "@material/notched-outline/mdc-notched-outline"; 4@use "@material/textfield"; 5 6@include textfield.core-styles; 7
JavaScript
Import MDCTextField module to instantiate text field component.
1import {MDCTextField} from '@material/textfield'; 2const textField = new MDCTextField(document.querySelector<HTMLElement>('.mdc-text-field'));
This'll initialize text field component on a single .mdc-text-field element.
Please see quick start demo on glitch for full example.
Need help?
We're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on our Discord Channel.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no binaries found in the repo
Reason
10 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 8
Reason
Found 11/30 approved changesets -- score normalized to 3
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-canary.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-canary.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-canary.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-canary.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-canary.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-canary.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-nightly.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-nightly.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-nightly.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-nightly.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-nightly.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-nightly.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-pull-request.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-pull-request.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-pull-request.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-pull-request.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-pull-request.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-pull-request.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-pull-request.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-pull-request.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:96: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:97: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:100: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: scripts/canary-release.sh:16
- Info: 0 out of 26 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
- Info: 5 out of 6 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/release-canary.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-nightly.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-pull-request.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 19 are checked with a SAST tool
Reason
103 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-jg8v-48h5-wgxg
- Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h
- Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
- Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
- Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
- Warn: Project is vulnerable to: GHSA-x77j-w7wf-fjmw
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-29xr-v42j-r956
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
4.1
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to @material/animation
ember-cli-mdc-animation
ember-cli addon for @material/animation
tailwindcss-animate
A Tailwind CSS plugin for creating beautiful animations.
react-material-ui-carousel
A Generic, extendible Carousel UI component for React using Material UI
@mui/icons-material
Material Design icons distributed as SVG React components.