material-components/material-web

这是什么？

核心功能

• 01基于 Material 3 设计的标准 Web 组件
• 02可在纯 HTML 中使用，也能配合 React、Vue、Angular 使用
• 03通过 CDN 和 import map 即可免构建使用
• 04提供 Material 排版规格的样式表
• 05支持通过 npm 安装用于生产构建

适用场景

• 为静态 HTML 页面添加 Material 风格的按钮、输入框和表单控件
• 在不绑定特定框架的前提下，基于 Material 3 构建 Web 应用界面
• 借助 CDN 快速原型化 Material 风格界面

快速上手

1. 1

   将 README 中的无构建 HTML 示例复制到一个 HTML 文件中

2. 2

   在浏览器中打开该 HTML 文件，即可看到从 CDN 加载并运行的组件

使用前须知

• !该项目目前处于维护模式，正在寻找新的维护者。

收录于专题

标签

常见问题

material-web 是什么？

基于 Lit 构建的 Material Design 3 Web 组件库，用于开发无障碍的 Web 应用。 Material Web（@material/web）是一套实现 Google Material 3 设计系统的 Web 组件库。按钮、复选框、单选框、文本输入框和排版样式等组件以标准自定义元素的形式发布，既可以直接用在普通 HTML 中，也能在 React、Vue、Angular 等框架里使用。

material-web 可以免费使用吗？用的什么许可证？

material-web 以 Apache-2.0 许可证开源。用于商业产品前，请先确认许可证条款。

material-web 还在维护吗？

活跃维护中。material-web 最近一次提交是在 2026年10月22日。

material-web 适合用来做什么？

为静态 HTML 页面添加 Material 风格的按钮、输入框和表单控件 在不绑定特定框架的前提下，基于 Material 3 构建 Web 应用界面 借助 CDN 快速原型化 Material 风格界面

material-web 怎么安装和运行？

将 README 中的无构建 HTML 示例复制到一个 HTML 文件中 在浏览器中打开该 HTML 文件，即可看到从 CDN 加载并运行的组件

在哪里获取 material-web？

源代码和安装说明在 GitHub 上：https://github.com/material-components/material-web