Material Components for Web

Material Components for Web (MDC Web) is a modular library of framework-agnostic UI components that implement Google’s Material Design guidelines for the web. It bundles more than 40 individual @material/* packages — buttons, dialogs, data tables, drawers, selects, sliders, and more — each usable independently or together via the material-components-web meta-package.

Every component is built on a shared foundation/adapter architecture that cleanly separates behavior from the DOM, making the components straightforward to wrap in any framework or use with vanilla JavaScript. Styling is delivered through customizable Sass mixins and theming, so teams can adopt Material Design while tailoring color, shape, density, and typography to their brand.

What You Get

• 40+ Material Design components (buttons, dialogs, data tables, drawers, menus, selects, sliders, and more)
• A framework-agnostic foundation/adapter architecture that separates logic from the DOM
• Customizable Sass theming with mixins for color, shape, density, and typography
• Individually installable @material/* packages plus an all-in-one meta-package

Common Use Cases

• Building Material Design interfaces in vanilla JavaScript or TypeScript
• Wrapping MDC foundations to create Material components for a custom or third-party framework
• Theming an application to Material Design while customizing brand color, shape, and density

Under The Hood

Architecture - Each component under packages/mdc-* follows a consistent triad: a foundation.ts holding framework-independent business logic, an adapter.ts interface abstracting DOM access, and a component.ts vanilla-JS wrapper that implements the adapter and drives the foundation. mdc-base provides the shared MDCComponent/MDCFoundation and observer utilities. The material-components-web meta-package simply depends on all ~50 @material/* packages and re-exports them.

Tech Stack - Written in TypeScript for logic and Sass for styling. Components ship both compiled JS and .scss theme files (mixins, variables, index partials). The monorepo uses per-package package.json manifests under packages/, published to npm under the @material scope.

Code Quality - The strict foundation/adapter separation keeps DOM concerns isolated and each component independently testable (every package includes a test/ directory). Types.ts and constants.ts files keep component contracts explicit. The project is production-mature but is no longer actively maintained per the README.

API Design - The uniform component structure means learning one component transfers to all others: attach a component to a root element, or wrap the foundation to integrate with a framework. Sass mixins provide a declarative theming surface. The main cost is verbosity — the adapter indirection adds boilerplate when authoring or wrapping components.