Materialize CSS Alternatives for Material Design Sites

Materialize is the CSS and JavaScript framework that brought Google's Material Design to plain HTML. The original project by Dogfalo still sits on GitHub with 38.8k stars and 623 open issues, but its npm package, materialize-css, stopped at 1.0.0 on September 9, 2018. Work moved to a community fork. @materializecss/materialize shipped 2.4.0 on September 24, 2026, under MIT, with docs at materializeweb.com.

First decide if you need to leave at all. If you only want a patched Materialize, move to the fork. Its recent releases are small: the 2.4.0 notes list a grid offset fix and a null guard for toasts. If you want Material Design 3, a bigger component set, or a library made for React, Vue or Angular, the seven picks below cover those cases.

One naming note. Materialize is also a streaming SQL database sold at materialize.com, and some "Materialize alternatives" lists mix the two. This page is about the CSS framework only.

Prices below are as of November 6, 2026. Our method is on How we review tools.

Quick comparison

Beer CSS

Beer CSS works the way Materialize did: link a stylesheet and an optional script, then write semantic HTML. The site calls it "the first CSS framework based on Material Design 3" and says it already supports M3 Expressive, the newer Google style. The README gives jsDelivr links for beer.min.css and beer.min.js at version 5.0.3, and shows a Brotli size badge of 14.5 kB.

Version 5.0.0 landed on npm on July 30, 2026, followed by three patches in a week. Dynamic color comes from a small companion package, material-dynamic-colors, which builds a palette from one source color or image. Materialize users who set themes by editing Sass variables will find this faster.

Best for: A Materialize site served as plain HTML that should look like current Material Design without adding a build tool.

Pricing:

• Free, MIT licence
• No paid tier

Watch out for:

• The project is small: 2.6k stars, 101 forks and 26 open issues on GitHub. Expect fewer tutorials and Stack Overflow answers than Materialize had.
• The class vocabulary is its own, so Materialize markup such as card-panel or collection has to be rewritten rather than restyled.

Official site: Beer CSS.

MUI

React developers who want Material components built for React usually land on MUI, the library formerly called Material-UI. The current major is 9. Version 9.5.0 was published to npm on October 9, 2026, and a 10.0.0 alpha appeared three days later. It supports React 17, 18 and 19.

The free MIT core covers buttons, dialogs, menus, forms and the basic data grid. Heavier pieces live in MUI X. The pricing page sells those per developer per year, and its FAQ confirms that @mui/x-data-grid is MIT while @mui/x-data-grid-pro is commercial.

Best for: A React app that needs Material components plus, later, an advanced data grid or date pickers.

Pricing:

• Community (MUI Core): free, MIT
• Pro: $299 per developer per year
• Premium: $599 per developer per year
• Enterprise: $1,399 per developer per year, from 15 seats
• 50% off for education and non-profits; renewals can rise up to 7% a year

Watch out for:

• Styling runs through Emotion by default. Version 9.5.0 lists @emotion/react and @emotion/styled as peer dependencies on npm, which adds a CSS-in-JS runtime Materialize never had.
• Majors move fast. npm carries separate tags for v5, v6, v7, the current v9 and a v10 alpha, so a project started today will face at least one major upgrade.

Official site: MUI.

Vuetify

Vuetify is the Vue answer to the same need. It ships Material components such as data tables, date pickers, navigation drawers and steppers, which Materialize either lacked or left to plugins. Releases are frequent: 4.3.2 went out on November 3, 2026, eight days after 4.3.1, per npm.

The older 3.x line is still patched, with 3.13.7 on October 14, 2026, so a team can upgrade from 3 to 4 on its own schedule. Version 4 needs Vue 3.5 or newer.

Best for: Vue 3 teams that want a full Material component kit, including data tables, from one package.

Pricing:

• Free, MIT licence on npm

Watch out for:

• It is Vue only. A Materialize site that is plain HTML with a few scripts would need a rewrite into Vue components first.
• Tree-shaking relies on a bundler plugin. Vuetify 4 lists vite-plugin-vuetify and webpack-plugin-vuetify as peer dependencies, so the CDN-only setup Materialize allowed is not the normal path.

Official site: Vuetify.

Angular Material

Angular Material comes from the Angular team at Google, which makes it the most official Material option on this list. The site describes it as "UI component infrastructure and Material Design components for mobile and desktop Angular web applications." The infrastructure part is the CDK, a set of unstyled building blocks for overlays, drag and drop and accessibility that you can use under your own design.

Version numbers track Angular itself. npm shows 22.2.6 published on November 4, 2026, with long-term support tags kept for every major back to v11.

Best for: Angular projects that want Material components and the CDK from the same team that ships Angular.

Pricing:

• Free, MIT licence

Watch out for:

• You upgrade it in lockstep with Angular. The 22.x CDK peer range is @angular/core ^22.0.0 || ^23.0.0, so an older Angular app cannot take the newest release.

Official site: Angular Material.

Material Web

Google's Material Web (MWC) is a set of web components such as <md-filled-button> and <md-outlined-text-field>. They work in any page or framework because they are custom elements built on Lit. That makes it the nearest Google-made match to Materialize's framework-free approach, and it follows Material 3.

Releases still happen. npm shows 2.5.0 on July 15, 2026, and a nightly build on November 5, 2026. The code is Apache-2.0, and the repo has 11.2k stars.

Best for: Teams that want Google's own Material 3 components and can accept a slow-moving project.

Pricing:

• Free, Apache-2.0 licence

Watch out for:

• The README says "MWC is in maintenance mode pending new maintainers." Do not expect new components soon.
• There is no grid or layout system. You still need your own CSS for page structure, which Materialize's 12-column grid covered.

Official site: Material Web.

Bootstrap

Some Materialize sites never needed Material Design, only a grid and a modal. For them Bootstrap is the safe default, with a far bigger pool of themes and answers. Our UIkit alternatives page compares it with other general-purpose frameworks. The stable release is 5.3.8 from August 2025 on npm, and its only peer dependency is Popper for tooltips and popovers.

A big change is coming. Bootstrap 6.0.0-alpha.1 shipped on October 8, 2026 with CSS layers, Sass modules and ESM-only JavaScript, and it needs Chrome or Edge 130, Firefox 132 or Safari 18.

Best for: Materialize users who care more about a well-known grid and components than about the Material look.

Pricing:

• Free, MIT licence

Watch out for:

• Starting on 5.3 means a class rename later. The v6 alpha moves responsive classes to a prefix, so .d-md-none becomes .md:d-none.
• It looks nothing like Material out of the box. Getting ripples, elevation and Material color roles back means a third-party theme or your own Sass.

Official site: Bootstrap. Our listing: Bootstrap.

daisyUI

daisyUI is a Tailwind CSS plugin that adds named component classes, so btn and card work again on top of utility classes. The site lists 68 components and 35 themes, all pure CSS. Version 5.7.50 was published on October 13, 2026, and it runs on Tailwind CSS 4, whose newest release, 4.3.5, came out on November 6, 2026.

It suits a Materialize project that is being rebuilt anyway and should end up on Tailwind. Themes swap with a data-theme attribute, which is quicker than recompiling Materialize's Sass.

Best for: A rebuild that moves to Tailwind CSS but still wants component classes and ready themes.

Pricing:

• Library: free, MIT
• Store: Auth template $19, HTML dashboard template $29, startup template from $69, Figma library from $49; daisyUI does not say if these are one-time or yearly

Watch out for:

• It has no JavaScript. Materialize's modals, dropdowns, sidenav and toasts need your own scripts or the native <dialog> element.
• Major versions rename classes. The v5 upgrade guide turned btn-group into join and removed form-control.

Official site: daisyUI.

How to choose

When to stay with Materialize CSS

Stay with Materialize if the site works and you only need fixes. Swap materialize-css for @materializecss/materialize, which has had eight releases since December 2024 on npm. The fork's README lists Chrome 35+, Firefox 31+ and Safari 9+ as supported, so it still covers very old browsers that Bootstrap 6 and Tailwind 4 drop. Rewriting a stable internal tool just to change frameworks rarely pays off.

Frequently asked questions