Material UI (MUI)

An MIT-licensed React component library that implements Google’s Material Design 2, themed through one JavaScript object, with commercial MUI X packages for advanced data grids, charts and pickers.

What it is: UI libraries (component libraries)
Type: Open source
Made by: MUI
License: MIT (Material UI and MUI X Community); MUI X Pro and Premium are commercial
Facts checked: 9 October 2026

What it is

Material UI is a React component library made by MUI, a company that is not part of Google. It implements Google’s Material Design, specifically Material Design 2: adopting Material Design 3 is an open GitHub issue, filed in October 2021. You install @mui/material with Emotion, its default styling engine (styled-components works too, but not with server rendering), and get ready-made components from buttons and text fields to autocomplete, dialogs, tables and the newer NumberField and Menubar. Customization happens at four levels: the sx prop for one element, styled wrappers for a reusable variant, theme overrides for every instance, and global CSS. The theme is a JavaScript object: give it one brand colour and Material UI derives the light, dark and contrast-text shades, and spacing follows an 8px grid by default.

MUI is open core. Material UI and the Community versions of MUI X (Data Grid, Date and Time Pickers, Charts, Tree View, Scheduler) are MIT-licensed. MUI X Pro adds multi-filtering, multi-sorting, column resizing and pinning, range pickers and advanced charts; Premium adds row grouping and Excel export. Both need a commercial licence for every front-end developer on the project. Since 8 April 2026 they are sold as single-application or multi-application licences, and v8 customers can keep renewing at the old prices. Without a valid key the components show a watermark and console warnings, and from v9 they send telemetry by default in development (not in production builds). Evaluation in non-production environments is free for 30 days.

Material UI v9 and MUI X v9 shipped together on 8 April 2026, jumping from Material UI v7 straight to v9 so both lines share one major version again. MUI also makes Base UI, a separate headless library that reached 1.0 in December 2025, and v9’s new components are built on it. For the next major, MUI says it will explore removing the Emotion dependency and integrating better with Tailwind CSS.

Why teams pick it

A large set of production-ready components that look finished on day one, with one theme object to apply a brand
Long-lived and widely used: started in 2014, with over 2,500 open-source contributors
Advanced components (data grid, charts, pickers, scheduler) from the same company, on the same major version from v9
An accessibility conformance report against WCAG 2.2 A and AA, published per component next to the source

Watch out for

It implements Material Design 2, not Material Design 3; the issue to adopt Material 3 has been open since October 2021
Styling runs through Emotion, a runtime CSS-in-JS library; styled-components is not supported with server rendering, and dropping Emotion is only planned for a future major
A design far from Material’s means fighting the defaults: MUI’s own team says Material UI “can become unwieldy” then, and points to its headless Base UI instead
The data grid features many apps need (multi-sorting, column pinning, row grouping, Excel export) sit in paid MUI X Pro and Premium, licensed per developer, with new pricing from April 2026 and telemetry on by default in development
The accessibility report is a draft self-assessment covering 12 components, without an external audit or assistive-technology testing

How it fits with other technologies

What uses Material UI (MUI)

TanStackcan render its tables withMaterial UI (MUI)UI libraries

One brand colour in, a derived palette out · ts

// npm install @mui/material @emotion/react @emotion/styled react react-dom
import { createTheme } from '@mui/material/styles'

const theme = createTheme({
  palette: { primary: { main: '#0b6e4f' } },
  shape: { borderRadius: 12 },
  components: {
    MuiButton: { defaultProps: { disableElevation: true } }, // every Button
  },
})

console.log(theme.palette.primary.light)        // rgb(59, 139, 114)
console.log(theme.palette.primary.dark)         // rgb(7, 77, 55)
console.log(theme.palette.primary.contrastText) // #fff
console.log(theme.spacing(2))                   // 16px on the default 8px grid

// pass it to <ThemeProvider theme={theme}> at the root of the React tree

MUI X plans#

From MUI’s licensing docs and its April 2026 pricing announcement, checked 2026-10-09.

	Community	Pro	Premium
Licence	MIT, free	Commercial	Commercial
Data Grid	`@mui/x-data-grid`	Adds multi-filtering, multi-sorting, column resizing and pinning	Adds row grouping and Excel export
Other packages	Date pickers, Charts, Tree View, Scheduler	Range pickers, advanced Charts, Tree View drag and drop	Premium Charts and Scheduler
Who needs a licence	Nobody	Every front-end developer on the project	Every front-end developer on the project
Without a key	Nothing to remove	Watermark and console warnings	Watermark and console warnings

Pro and Premium are sold as single-application or multi-application licences since 8 April 2026; Enterprise is multi-application with a 15-seat minimum.

See it in a real stack

No architecture uses Material UI (MUI) yet. Drop it into the playground and wire it up yourself.Open playground →

Where it came from2014–2026

Material UI started in 2014, when Hai Nguyen (GitHub @hai-cea) began a React implementation of Google’s Material Design guidelines, at a time when React itself was young. About two years later Nathan Marks started rebuilding it from the ground up to fix long-standing problems with customization and code quality. That rewrite became v1 in May 2018, which also replaced inline styles with CSS-in-JS (JSS) and a JavaScript theme object, and adoption took off as teams moved their interfaces to React.

Success brought a different complaint. In one of MUI’s developer surveys, requests to improve the Material Design implementation fell by 60% while five times as many developers struggled to customize the components, so v5 focused on customization. With v5, in September 2021, the organization renamed itself MUI, dropped the hyphen from Material UI and moved to mui.com, partly because too many people took Material UI for a Google product. Its paid MUI X Pro plan had launched in 2020 to fund full-time engineers.

In 2022 MUI announced MUI Base, a headless version of its components for designs far from Material; it grew into Base UI, built with people from Radix and Floating UI, and reached 1.0 in December 2025. In April 2026 MUI released Material UI and MUI X v9 together, skipping Material UI v8, and changed MUI X pricing.

Why it’s built this way

Implement Material Design, but let brands replace it: MUI’s stated vision is an elegant React implementation of the guidelines that companies can customize so their product doesn’t look like another Google app, plus components the guidelines never covered.
CSS-in-JS and a theme object: Inline styles lacked media queries, pseudo-selectors and easy overrides, so v1 moved to JSS (later Emotion) with a theme holding the palette, typography and breakpoints.
Open core: MIT components, paid advanced ones: MUI sells licences for components it believes the open-source community couldn’t reasonably maintain alone, to pay a full-time staff, and promises that anything released under MIT stays MIT.
Rename to MUI: The old name tied the company to one design language and confused people about Google; MUI left room for a headless library and a second design system.

Timeline

2014
Material UI starts as a React implementation of Material Design
2018
Material UI v1 after a two-year rewrite, in May
2020
MUI X Pro plan introduced
2021
Material-UI becomes MUI; v5 released in September
2022
MUI Base, a headless alternative, announced in September
2025
Base UI 1.0 on 11 December
2026
Material UI and MUI X v9 together on 8 April; new MUI X licensing

Sources14 · facts checked 9 October 2026

Improve this page on GitHub