One library, every framework

MDC ships native custom elements built on Lit. No wrappers, no framework lock-in — the same<mdc-button> works in React, Vue, Angular, Svelte, Astro, and plain HTML.

• Material Design 3 + Expressive

  Follows M3 and Material Expressive specs, styled entirely through --md-sys-* design tokens.

• Tree-shakable imports

  Every component is its own entry point, so you import just the elements you use and nothing else lands in your bundle.

• Accessible by default

  Keyboard navigation, focus rings, ARIA semantics, forced-colors and reduced-motion support built in.

• Modern baseline, zero polyfills

  Targets Baseline 2026 evergreen browsers. Native CSS, no vendor prefixes, no legacy fallbacks.

FAQ

Does MDC work with React / Vue / Angular?

Yes. They are standard web components. Vue needs isCustomElement: tag => tag.startsWith('mdc-'), Angular needs CUSTOM_ELEMENTS_SCHEMA, React 19 works natively.

How is theming handled?

Through @sandlada/material-design-css tokens. Import the preset plus a prebuilt color scheme, toggle dark on <html> for dark mode.

How is this different from material-web?

MDC continues the Material Web approach with Material Expressive coverage, strict token-driven styling, and a cross-framework-first docs and playground experience.