# Material Web — Official Material Design 3 Web Components by Google

> Framework-agnostic web components implementing Google's Material Design 3 (Material You). Works with any frontend framework or vanilla HTML.

## Install

Save as a script file and run:

# Material Web — Official Material Design 3 Web Components by Google

## Quick Use
```bash
npm install @material/web
```
```html
<script type="module">
  import '@material/web/button/filled-button.js';
  import '@material/web/textfield/outlined-text-field.js';
</script>
<md-filled-button>Click me</md-filled-button>
<md-outlined-text-field label="Name"></md-outlined-text-field>
```

## Introduction
Material Web is Google's official implementation of Material Design 3 as standard web components. Unlike framework-specific libraries like MUI or Angular Material, these components work with any JavaScript framework or plain HTML. They bring the Material You design language to the web with built-in theming, accessibility, and responsive behavior.

## What Material Web Does
- Provides 30+ UI components following Material Design 3 specifications
- Works with React, Angular, Vue, Svelte, or plain HTML via standard web components
- Supports dynamic color theming based on Material You color system
- Includes built-in accessibility features compliant with WAI-ARIA
- Offers customizable design tokens through CSS custom properties

## Architecture Overview
Material Web components are built with Lit, a lightweight library for creating web components. Each component is a self-contained custom element with shadow DOM encapsulation. Theming is handled through CSS custom properties mapped to Material Design tokens, enabling consistent styling without build-tool integration. Components ship as ES modules for tree-shaking.

## Self-Hosting & Configuration
- Install via npm and import individual components for optimal bundle size
- Configure theme colors using CSS custom properties on the document root
- Use the Material Theme Builder to generate custom color schemes
- No build-step required for basic usage; works with any module bundler
- SSR-compatible when using Lit's server-side rendering support

## Key Features
- Framework-agnostic standard web components that work anywhere
- Material Design 3 and Material You dynamic color support
- Shadow DOM encapsulation prevents style conflicts
- Comprehensive accessibility with keyboard navigation and screen reader support
- Design token system for consistent cross-component theming

## Comparison with Similar Tools
- **MUI (Material UI)** — React-only, Material Design 2 by default; larger ecosystem
- **Angular Material** — Angular-only, official Google library for Angular projects
- **Vuetify** — Vue-only Material component library
- **Shoelace** — framework-agnostic web components but not Material Design
- **Radix UI** — unstyled React primitives; different design philosophy

## FAQ
**Q: Can I use Material Web with React?**
A: Yes. Web components work in React with some wrapper considerations for event handling and property passing.

**Q: Is this the same as MUI?**
A: No. MUI is a community React library. Material Web is Google's official framework-agnostic implementation using web components.

**Q: Does it support dark mode?**
A: Yes. Material Design 3 theming includes automatic light and dark color scheme support via CSS custom properties.

**Q: What is the browser support?**
A: Material Web supports all modern browsers including Chrome, Firefox, Safari, and Edge.

## Sources
- https://github.com/material-components/material-web
- https://material-web.dev/

---
Source: https://tokrepo.com/en/workflows/asset-89754234
Author: Script Depot