[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10798":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":36,"readmeContent":37,"aiSummary":38,"trendingCount":16,"starSnapshotCount":16,"syncStatus":39,"lastSyncTime":40,"discoverSource":41},10798,"material-web","material-components\u002Fmaterial-web","material-components","Material Design Web Components","https:\u002F\u002Fmaterial-web.dev",null,"SCSS",11016,1114,202,120,0,20,81,7,44.14,"Apache License 2.0",false,"main",[25,26,27,28,29,30,31,32,33,34,35],"component-","design-system","lit","lit-element","lit-html","material","material-design","material-you","material3","web","web-components","2026-06-12 02:02:26","# Material Web\n\n\u003Cimg src=\".\u002Fdocs\u002Fimages\u002Fmaterial-web.gif\"\n  title=\"Material web components\"\n  alt=\"A collection of Material web components\"\n  style=\"border-radius: 32px\">\n\n[![Published on npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F%40material%2Fweb)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@material\u002Fweb)\n[![Join our Discord](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdiscord-join%20chat-5865F2.svg?logo=discord&logoColor=fff&label=%23material)](https:\u002F\u002Flit.dev\u002Fdiscord\u002F)\n[![Test status](https:\u002F\u002Fgithub.com\u002Fmaterial-components\u002Fmaterial-web\u002Factions\u002Fworkflows\u002Ftest.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fmaterial-components\u002Fmaterial-web\u002Factions\u002Fworkflows\u002Ftest.yml)\n[![npm Downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F%40material%2Fweb?label=npm%20downloads)](https:\u002F\u002Fnpm-stat.com\u002Fcharts.html?package=%40material%2Fweb)\n[![jsDelivr hits (npm)](https:\u002F\u002Fimg.shields.io\u002Fjsdelivr\u002Fnpm\u002Fhm\u002F%40material%2Fweb)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@material\u002Fweb?tab=stats)\n\n`@material\u002Fweb` is a library of\n[web components](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FWeb_Components)\u003C!-- {.external} -->\nthat helps build beautiful and accessible web applications. It uses\n[Material 3](https:\u002F\u002Fm3.material.io\u002F)\u003C!-- {.external} -->, the latest version of Google's\nopen-source design system.\n\n**Note:\n[MWC is in maintenance mode pending new maintainers](https:\u002F\u002Fgithub.com\u002Fmaterial-components\u002Fmaterial-web\u002Fdiscussions\u002F5642).**\n\n## Resources\n\n-   [Introduction](.\u002Fdocs\u002Fintro.md)\n-   [Roadmap](.\u002Fdocs\u002Froadmap.md)\n-   [Component docs](.\u002Fdocs\u002Fcomponents\u002F)\n-   [Bundle size](.\u002Fdocs\u002Fsize.md)\n-   [Browser support and FAQ](.\u002Fdocs\u002Fsupport.md)\n\n## Quick start\n\n> Tip: Using Angular? We recommend using\n> [Angular Material](https:\u002F\u002Fmaterial.angular.io\u002F)\u003C!-- {.external} --> components\n> instead.\n\nThis code snippet is a buildless example that loads `@material\u002Fweb` from a CDN.\nCheck out the [quick start](.\u002Fdocs\u002Fquick-start.md) guide to install and build\nfor production.\n\n\u003C!-- LINT.IfChange -->\n\n```html\n\u003Chead>\n  \u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  \u003Cscript type=\"importmap\">\n    {\n      \"imports\": {\n        \"@material\u002Fweb\u002F\": \"https:\u002F\u002Fesm.run\u002F@material\u002Fweb\u002F\"\n      }\n    }\n  \u003C\u002Fscript>\n  \u003Cscript type=\"module\">\n    import '@material\u002Fweb\u002Fall.js';\n    import {styles as typescaleStyles} from '@material\u002Fweb\u002Ftypography\u002Fmd-typescale-styles.js';\n\n    document.adoptedStyleSheets.push(typescaleStyles.styleSheet);\n  \u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1 class=\"md-typescale-display-medium\">Hello Material!\u003C\u002Fh1>\n  \u003Cform>\n    \u003Cp class=\"md-typescale-body-medium\">Check out these controls in a form!\u003C\u002Fp>\n    \u003Cmd-checkbox>\u003C\u002Fmd-checkbox>\n    \u003Cdiv>\n      \u003Cmd-radio name=\"group\">\u003C\u002Fmd-radio>\n      \u003Cmd-radio name=\"group\">\u003C\u002Fmd-radio>\n      \u003Cmd-radio name=\"group\">\u003C\u002Fmd-radio>\n    \u003C\u002Fdiv>\n\n    \u003Cmd-outlined-text-field label=\"Favorite color\" value=\"Purple\">\u003C\u002Fmd-outlined-text-field>\n\n    \u003Cmd-outlined-button type=\"reset\">Reset\u003C\u002Fmd-outlined-button>\n  \u003C\u002Fform>\n  \u003Cstyle>\n    form {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 16px;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fbody>\n```\n\n\u003C!-- LINT.ThenChange(.\u002Fg3doc\u002Fdocs\u002Fquick-start.md) -->\n","material-components\u002Fmaterial-web 是一个基于 Material Design 的 Web 组件库，旨在帮助开发者构建美观且易于访问的 Web 应用程序。该项目利用了最新的 Material 3 设计系统，并采用 SCSS 作为主要样式语言，同时支持 Lit、Lit-Element 和 Lit-HTML 等现代 Web 技术。这些组件不仅遵循了 Google 的设计指南，还具有良好的可定制性和跨浏览器兼容性。适合需要快速搭建符合 Material Design 规范的前端界面的场景，无论是个人项目还是企业级应用，都能从中受益。目前该项目处于维护模式，正在寻找新的维护者。",2,"2026-06-11 03:30:15","top_topic"]