-
-
Notifications
You must be signed in to change notification settings - Fork 32.7k
[blog] Blog next Material UI #46842
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[blog] Blog next Material UI #46842
Changes from all commits
c187f4e
64f165f
0789b38
03b7f1d
f0288b4
31db2e8
ebc6c51
d924872
d0da345
4c8a56c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
/// <reference types="next" /> | ||
/// <reference types="next/image-types/global" /> | ||
/// <reference path="./export/types/routes.d.ts" /> | ||
|
||
// NOTE: This file should not be edited | ||
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import * as React from 'react'; | ||
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; | ||
import { docs } from './material-ui-next-summer-2025.md?muiMarkdown'; | ||
|
||
export default function Page() { | ||
return <TopLayoutBlog docs={docs} />; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,137 @@ | ||
--- | ||
title: The next evolution of Material UI | ||
Check failure on line 2 in docs/pages/blog/material-ui-next-summer-2025.md
|
||
description: Learn about "New Lib", the spiritual successor to Material UI. | ||
date: 2025-09-09T08:00:00.000Z | ||
authors: ['josefreitas', 'colmtuite', 'oliviertassinari'] | ||
tags: ['Material UI', 'Product'] | ||
manualCard: false | ||
--- | ||
|
||
<style> | ||
#blog-responsive-image { | ||
height: 230px; | ||
@media (max-width: 600px) { | ||
height: 167px; | ||
} | ||
} | ||
</style> | ||
|
||
<a href="https://github.com/newco/New Lib"> | ||
<img | ||
id="blog-responsive-image" | ||
src="/static/blog/material-ui-next-summer-2025/intro.png" | ||
alt="" | ||
height="2400" | ||
width="800" | ||
style="width: 100%; object-fit: cover; object-position: center; border: 0px;" | ||
/> | ||
</a> | ||
|
||
In a recent announcement, we presented our goal to ship the next major version of Material UI with support for Material Design 3. While working on that project, it became obvious that simply layering MD3 on top of the existing codebase wouldn't deliver the experience the community deserves. | ||
Check failure on line 30 in docs/pages/blog/material-ui-next-summer-2025.md
|
||
|
||
Today, we're excited to share our bold, new vision for Material UI. | ||
Check failure on line 32 in docs/pages/blog/material-ui-next-summer-2025.md
|
||
|
||
We're in the late stages of rebuilding Material UI from the ground-up. Built on top of [Base UI](https://mui.com/base-ui/) (our headless UI library), it incorporates all of the lessons we've learned over 10+ years of maintaining Material UI. | ||
Check failure on line 34 in docs/pages/blog/material-ui-next-summer-2025.md
|
||
|
||
The result is a powerful new library, codenamed New Lib. A complete UI component library for enterprise applications that delivers exceptional visual design, dramatically improved performance, enchanced accessibility, optional first-class Tailwind integration, advanced theming, and more composabie APIs. | ||
|
||
New Lib is the spiritual successor to Material UI, and will carry our ecosystem forward. | ||
Check warning on line 38 in docs/pages/blog/material-ui-next-summer-2025.md
|
||
|
||
## Why rebuild Material UI? | ||
Check failure on line 40 in docs/pages/blog/material-ui-next-summer-2025.md
|
||
|
||
Over the last six years, the web has changed dramatically. Design standards are higher, applications are more complex, the web platform has evolved, and the expectations of enterprise teams have grown. When we looked at our existing codebase through that lens, it became clear that a ground-up refactor was the right path forward. | ||
Check warning on line 42 in docs/pages/blog/material-ui-next-summer-2025.md
|
||
|
||
- Performance | ||
- Accessibility | ||
- Visual design | ||
- **Decouple from one look.** Most teams started with Material then overrode nearly everything. White-label by default removes that friction. | ||
- **Unlock deeper control.** Composition lets you swap pieces instead of forking or wrestling specificity. | ||
- **Meet modern demands.** Higher design standards, more complex use cases, and enterprise expectations pushed us to a ground-up refactor. | ||
|
||
## Themes: white-label by default | ||
|
||
One of the biggest lessons from Material UI is that developers often don't need Material Design; they need their design. With New Lib, we're introducing a white-label design system out of the box. You'll find a range of polished starter themes that help your application look great from the start without configuration. When you're ready to differentiate, New Lib's token-based theming system lets you define your own palette, spacing, typography, radius values and etc—or switch to an entirely custom theme. | ||
Check failure on line 53 in docs/pages/blog/material-ui-next-summer-2025.md
|
||
|
||
**< in-depth examples: we want to show some examples here of theming, customization and design >** | ||
|
||
## Composition: break down and build up | ||
|
||
Material UI has always been built on solid abstractions, but some components were hard to customize without forking code. New Lib takes composition to heart. Each component is a collection of smaller building blocks that you can assemble or replace as needed. For instance, you can still import a fully configured DataGrid, but you can also import only the pieces you need—like a column header or row renderer—and compose them together. This approach provides the best of both worlds: a batteries-included default for rapid development, and a composable foundation when you need to take over control. | ||
|
||
**< in-depth examples: we want to show some examples of decomposition (starting from high level and going low level) >** | ||
|
||
## Code distribution | ||
|
||
No changes here. Just like Material UI, New Lib ships as a tree-shakeable npm package rather than a copy and paste library. Receiving library updates via npm—without maintaining a local fork of duplicated source—means you receive bug fixes and security patches via semver, rather than by manually diffing copied files. | ||
|
||
Of course, New Lib will be open-source, so you can copy as much code as you like. But the happy path is designed for long-term maintainability. | ||
|
||
## What happens to Material UI? | ||
|
||
Material UI and MUI X packages will be maintained and supported long-term. While New Lib will be the next generation of Material UI—and you should think of New Lib as the natural evolution of Material UI rather than a separate product—we are not abandoning the current npm package. | ||
|
||
- **Active LTS.** Material UI v6 and v7 stay in long-term support (bug/security fixes and critical regressions). | ||
- **Docs stay up.** Existing guides, examples, and API docs remain available. | ||
|
||
| Package | Status | Support scope | | ||
| -------------- | -------------------------------- | -------------------- | | ||
| Material UI v7 | Long term support until 2028 | bug & security fixes | | ||
| Material UI v6 | Long term support until 2028 | bug & security fixes | | ||
| New Lib | pre-alpha - release by Sept 2026 | active development | | ||
|
||
## Migration and continuity | ||
|
||
We'll provide migration guides and hands-on support to help you upgrade. | ||
|
||
- **Smooth migration.** You can install New Lib alongside Material UI and migrate screen-by-screen. We'll provide guides, codemods, AI tooling, and office hours. | ||
- **MD3 as optional theme.** If the community votes for it, Material Design 3 will ship as a theme in New Lib—no lock-in to the Material look. | ||
|
||
We understand that adopting a new major can be intimidating. That's why we're committed to making the transition as smooth as possible. When New Lib reaches beta later this year, you can expect: | ||
|
||
**An incremental migration path.** You'll be able to install New Lib alongside Material UI and gradually migrate screens or components. We'll publish guides, codemods, AI tooling, and examples to help you update your code. | ||
|
||
**Long-term support for prior majors.** Material UI will continue receiving critical fixes while you upgrade, similar to how MUI X extended the LTS window when v8 was released. | ||
|
||
**Dedicated support options.** Our Customer Success team is scaling up to provide tailored assistance to our enterprise customers. Whether you need training, hands-on migration help, or architectural guidance, we'll be there. | ||
|
||
## Material Design 3: your vote matters | ||
|
||
We acknowledge that Material Design may still have a place in the ecosystem, but we also recognise that it shouldn't be the default for every product. To decide where to prioritize our resources, we're asking the community to vote on whether Material Design 3 should be one of the first official themes for New Lib. | ||
|
||
Have your say →: [Community Poll (1min)](https://tally.so/r/w8X8Po) 🗳️ | ||
|
||
## What's next | ||
|
||
Our roadmap for New Lib is ambitious. Over the coming months, we'll release RFCs, beta packages, and developer previews (starting at the end of 2025). In parallel, we'll continue to deliver improvements to the existing Material UI ecosystem, including updates and new features for our advanced components scheduled for March 2026. Here are a few initiatives on our radar: | ||
|
||
**Additional themes.** Beyond a default white-label theme, we plan to ship themes inspired by other design systems and brand palettes. Material Design 3 will be a theme depending on the community's wishes. | ||
|
||
**AI-ready components.** Just as MUI X is exploring AI-assisted features, we're experimenting with patterns and APIs that make AI-driven UIs straightforward to build. | ||
|
||
**Stable release around September/October 2026,** though the exact timeline is still subject to change based on your feedback and the results of our beta program. | ||
|
||
## How to get involved | ||
|
||
Your feedback will shape all of these initiatives. We can't wait to hear what you think and to build the next generation of UI components together. | ||
|
||
- **Join the discussion:** [GitHub Discussions](https://github.com/mui/material-ui/discussions) | ||
- **Vote on MD3:** [Community poll](https://tally.so/r/w8X8Po) | ||
- **Try pre-release builds:** _(when available)_ | ||
|
||
We're excited to build this with you. | ||
|
||
> **TL;DR** We're rebuilding Material UI on top of Base UI to deliver a white-label, theme-agnostic, highly composable library. Material UI will remain supported (v6/v7 stay in Long term support) and you'll get support for migration, npm distribution (no copy-paste), and MD3 as an optional theme if the community votes for it. | ||
|
||
## Table of contents | ||
|
||
- [Why rebuild Material UI?](#why-rebuild-material-ui) | ||
- [Themes: white-label by default](#themes-white-label-by-default) | ||
- [Composition: break down and build up](#composition-break-down-and-build-up) | ||
- [Distribution: npm package vs copy-and-paste](#distribution-npm-package-vs-copy-and-paste) | ||
- [What happens to Material UI?](#what-happens-to-material-ui) | ||
- [Migration and continuity](#migration-and-continuity) | ||
- [Material Design 3: your vote matters](#material-design-3-your-vote-matters) | ||
- [What's next](#whats-next) | ||
- [How to get involved](#how-to-get-involved) | ||
|
||
It builds on everything we've learned and preserves the developer-centric principles that have made Material UI successful, while introducing a modern API for improved customization and a much more flexible theming system that works with any styling tech stack (for example, Tailwind, Emotion, or plain CSS with CSS variables). |
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The idea here is to create a discussion (just before releasing the post) to host the community's comments.