# material-components/material-web

Material Design Web Components

Repository: https://github.com/material-components/material-web
Canonical: https://ross.abutalabs.com/products/material-web
Homepage: https://material-web.dev
Language: SCSS
License: Apache-2.0
License Family: permissive
Topics: component-, design-system, lit, lit-element, lit-html, material, material-design, material-you, web, web-components, material3
Last push: 2026-08-26T17:57:35+00:00

## Health v2 (maintenance only)
Score: 89/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 99, release rhythm 69, longevity 100
- inputs: {"age_days": 3081, "days_push": 7, "days_rel": 49, "gap_med": 168.5, "n_releases_24m": 5}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 11202, forks 1138 (observed 2026-08-28T04:10:46.407513+00:00)

## What it is
Material Web (@material/web) is a library of framework-agnostic web components implementing Google's Material 3 (Material You) design system, built with Lit. It provides accessible, themeable UI elements like buttons, checkboxes, dialogs, and text fields that work across frameworks via custom HTML elements.

## Use cases
- add material design components to a web app
- use material 3 design tokens for theming
- build accessible forms with styled inputs and buttons
- use the same UI components across react, vue, and svelte
- prototype a material-styled page from a CDN without a build step
- implement dynamic color and dark mode with css custom properties

## When to choose
- you want Material 3 styling with framework-agnostic web components
- you use Lit or vanilla JS and want drop-in custom elements
- you need design-token-based theming with CSS custom properties
- accessibility across multiple screen readers is a priority

## When to avoid
- you use Angular - Angular Material is the recommended choice
- you need long-term active development - the project is in maintenance mode pending new maintainers
- you need components still on the roadmap like data tables, date pickers, or bottom sheets
- you must support browsers older than Chrome/Edge 120, Firefox 119, or Safari 16.4

## Facets
- artifact type: library
- maturity: maintenance
- function: ui-components, frontend-framework, theme, accessibility
- domain: web-development, frontend, web-design, cross-platform
- platform: browser
- tags: material-design, material-3, web-components, lit, design-system, design-tokens, theming, web-server, nodejs

## Member repositories
- material-components/material-web (main) score 89

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:10:46.407513+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:16:27.674472+00:00, confidence not recorded.
  - readme: https://github.com/material-components/material-web (fetched 2026-08-28T04:10:46.407513+00:00, sha c11c3a307eed)
  - homepage: https://material-web.dev (fetched 2026-08-29T08:15:06.375857+00:00, sha 88f21f6226b3)
  - site_page: https://material-web.dev/about/intro (fetched 2026-08-29T08:15:06.378901+00:00, sha f144f9583418)
  - site_page: https://material-web.dev/about/quick-start (fetched 2026-08-29T08:15:06.381346+00:00, sha 496dc7059d88)
  - site_page: https://material-web.dev/about/roadmap (fetched 2026-08-29T08:15:06.383171+00:00, sha b6386ff6eeb3)
  - site_page: https://material-web.dev/about/support (fetched 2026-08-29T08:15:06.385021+00:00, sha e77e512e9200)
  - site_page: https://material-web.dev/about/size (fetched 2026-08-29T08:15:06.386814+00:00, sha d2a340de75a8)
- Data as of 2026-08-30T08:39:29.467469+00:00.