Why material

material is an independent Material Design 3 component library for the web, with Expressive components, plain JavaScript factories, web components, and framework bindings. This guide sets out what it ships, what a page downloads, and the limits to check before choosing it. See Getting started for installation.

Material 3 and Expressive coverage

Google describes M3 Expressive as an evolution of Material 3, with new and updated components, spring motion, and changes to shape, colour and typography. It does not replace every baseline component. material combines baseline components with Expressive controls and styling; the table below describes its shipped scope, rather than claiming that every option in the design guidelines is implemented.

These are the library's 37 components, grouped as in the component catalogue. Each link opens the reference for that component's options and limitations. Forms and colour pickers are additional references for material-addons, outside this count.

Actions

Selection & input

Navigation

Google's toolbar overview recommends the docked toolbar in place of the bottom app bar. Floating-toolbar collapse is not done yet: toolbars can hide on scroll (scrollBehavior: exit), rather than collapsing a floating toolbar into a smaller control or FAB on scroll. Choose the behavior that exists today rather than depending on a future update.

Containment

Communication

The colour roles, shape tokens and motion are shared across these components. See Theming for customisation and Architecture for how the same implementation serves the different bindings.

Measured bundle sizes

The following is the published material 3.7.2 size table, taken from its README's CI-measured rows. These are minified, gzipped outputs measured from the packed package, not estimates or the size of an entire app. Here, kB means 1,000 bytes. New releases can change these figures.

The full stylesheet is about 59 kB gzip, against a 63.75 kB gzip CI budget. The release changelog records the underlying package measurements.

A page pays only for what it imports when its bundler tree-shakes the JavaScript and it uses selective style entries. Importing material/styles deliberately brings the whole stylesheet; importing material/styles/base and the needed component styles keeps that cost selective. Web components and framework bindings carry their shadow-root styles. The component catalogue shows per-component sizes; shared code means adding individual figures is not a reliable way to predict a combined bundle. Measure your own production build too.

Browser support

The supported target is current Chrome, Edge, Firefox and Safari. The library's browser support statement also names the ES2022 JavaScript floor and the platform features used by its elements.

In older browsers without CSS linear(), every component renders correctly without the spring transitions, provided the browser meets the JavaScript and other platform requirements. This motion fallback is not a promise of support for every old browser.

The elements use form-associated custom elements for form values and validation, and the top layer through popover and <dialog> for overlays. All current browsers in the table provide those features. Check your actual browser or embedded webview target when it is older than the current releases.

Frameworks and server rendering

There are zero runtime dependencies. React, Vue, Svelte and SolidJS are optional peer dependencies: the library uses the framework your app already has. The published README describes the shared implementation and binding contracts.

For SSR, renderElement from material/ssr emits Declarative Shadow DOM, and the framework bridges are material/ssr/react, material/ssr/vue, material/ssr/svelte and material/ssr/solid. They render the same element roots on the server and hydrate in the browser. SSR targets Node and Bun; worker and edge runtimes are unsupported. Plain factories need a browser DOM; use the server entry for server output.

The SSR contract describes inline styles for a styled first paint and link mode for smaller HTML. Link mode can paint unstyled roots in WebKit until its stylesheets arrive. The FAB menu opts out of server rendering, and the React and Svelte bridges have limits around context and Suspense; check the server-rendering guide before designing around those features.

Release history and reporting issues

As of November 5, 2026, the latest published release is 3.7.2. Recent releases have been frequent: 3.7.0 was published on November 4, and 3.7.1 and 3.7.2 on November 5. That is an observed recent pace, not a promised release schedule or support response time.

Read the changelog for changes and migration notes, and the release history to check what has actually shipped. Evaluate that history against the maintenance needs of your app.

Report bugs or request features in the issue tracker. Include the package version, browser and framework, a small reproduction, and what you expected to happen. An independent project still needs evidence you can inspect: working examples, release notes and reproducible issue reports are more useful than a blanket completeness claim.

Other libraries, as of November 2026

These projects make different tradeoffs. The links below lead to each project's own description; check its current component docs and maintenance status when deciding.

There is no bundle-size ranking here: different imports, styling strategies and measurement fixtures would make the figures incomparable. Try the components your app needs and compare accessibility, integration and production output in the same app.