So MUI dropped v9 last week. And yes, they jumped Material UI straight from v7 to v9. There is no Material UI v8. The reason is pretty sensible. MUI X was already on v9, and they wanted to re-align the major versions across the whole ecosystem so you’re not spending 20 minutes every upgrade figuring out which version of @mui/x-data-grid pairs with which version of @mui/material.
If you’ve been on MUI for a few years, you know that pain. It got worse after MUI X v6 decoupled from Material UI v5 in 2023. From here on they share a major. When MUI X ships v10, Material UI ships v10 too. Clean.
Alright, let’s get into what actually changed and what you’ll need to fix in your codebase.
The actual changes in Material UI v9
This isn’t a “new visual design” release. It’s more of a foundations release, the kind that makes your existing UI work better without you having to change much. Here’s what stood out:
Keyboard navigation finally works like it should
Stepper, Tabs, and MenuList now use proper roving tabIndex. If you’ve ever had a user complain that your tab navigation feels off, this is probably why. It’s fixed now. Arrow keys move focus within the group, Tab moves out. You might want to double-check any custom keyboard handlers you wrote as workarounds because they could now conflict.
NumberField and Menubar: two new components
NumberField is the first new primitive built on Base UI. It’s a numeric input that does what you’d expect: consistent accessibility, styling hooks, increment/decrement. Nothing groundbreaking, but it means you can stop reaching for a third-party package for something this basic.
Menubar is for navigation-style horizontal menu bars. Again, something that was annoying to compose from scratch before. Now it’s just there.
sx prop got 30% faster
MUI mentions up to 30% better performance for heavy sx prop usage in their v9 notes (PR #44254). If you’re building data-dense UIs with a lot of inline sx expressions, it’s worth testing. No changes needed on your end.
color-mix() in the theme
The theme now generates color-mix() values on top of the existing CSS variables system. MUI presents this as a theme update, not a full rewrite. In practice it means more precise control over derived colors and better integration if your design system already uses color-mix() for overlays and surfaces. Useful if you’re doing serious work.
Bundle cleanup
They removed duplicated CSS rules, updated bundle targets, and cleaned up system props across components. Nothing you need to actively do, but your output will be slightly leaner.
MUI X v9: what changed in the advanced components
This is the more interesting half of the release. Each component family got meaningful updates.
Data Grid
MUI X v9 brings AI Assistant and in-grid charts integration. The AI Assistant lets users describe changes in natural language, with the grid applying updates while keeping state visible and editable. MUI Console provides a centralized place to manage license keys and service API keys.
Charts
Keyboard navigation is on by default now. Candlestick chart added if you’re on Charts Premium. The fix I’m actually happy about: tooltips now portal through ChartsLayerContainer, so they don’t get clipped anymore when a chart is inside a scrollable container, a dialog, or a Data Grid cell. If you’ve hit that bug, you know how annoying it was.
Tree View
RichTreeViewPro gets virtualization by default, opt out if you need to. They also cleaned up treeItemClasses and some hook inconsistencies when you’re theming trees or calling imperative APIs.
Date and Time Pickers
Keyboard calendar navigation works properly now. fldRieef is stable with clearValue. Click-away focus behavior is more reliable. New locale support added too: thTH and AdapterDayjsBuddhist if you need those.
Two new alpha components
MUI X Scheduler: resource-aware calendars and timeline views. Think Google Calendar-level rendering, built on MUI X. Still alpha, don’t ship it yet, but the direction is clear.
MUI X Chat: conversational UI components for LLM interfaces, with adapters for different AI backends. Worth keeping an eye on if you’re building anything with streaming chat.
Breaking changes: what you’ll actually run into
Here’s the honest list of things that will break. Some are handled by codemods, some need manual eyeballing:
Grid: the big one
The xs, sm, md, lg, xl props are gone. And the item prop is gone. Everything moves to a single size prop:
// before
<Grid item xs={12} sm={6} md={4}>
// after
<Grid size={{ xs: 12, sm: 6, md: 4 }}>Also, GridLegacy is fully removed from theme types. If you were on GridLegacy as a transitional step, you need to finish the migration now.
System props removed
System props have been removed from a bunch of components. Run the codemod first, then manually check anything complex:
npx @mui/codemod@latest v9.0.0/system-props <path>Deprecated props cleaned up
Accordion lost some deprecated props: TransitionComponent and TransitionProps
if you used them. There’s a codemod for this too:
npx @mui/codemod@latest deprecations/accordion-props <path>Icon renames
23 icons ending with Outline (without the ‘d’) have been removed. They were exact duplicates of the Outlined variants. Pure find-replace in your imports. InfoOutline becomes InfoOutlined, etc.
ListItemIcon spacing
Default min-width changed from 56px to 36px. Small, but it will shift your list layouts. Scan for anything that assumed the old value in custom styles.
TablePagination numbers
Pagination numbers are now formatted with Intl.NumberFormat, so 103177 shows as 103,177 in en-US or 103.177 in de-DE. If you need the old behavior, pass a custom labelDisplayedRows function.
One more thing: MUI X pricing changes in 2026
Separate from the v9 release, MUI updated their pricing and licensing effective April 8, 2026. Worth reading before you budget for the upgrade:
- Pro and Premium are moving to an application-based licensing model, single-app or multi-app options. Per-developer licensing still applies within that.
- Enterprise stays multi-application with a 15-seat minimum.
- If you’re on v8 and staying there, your renewal pricing is unchanged. The new prices only hit if you’re upgrading to v9 or moving from Pro to Premium.
- Priority support is now Enterprise-only. Not a Premium add-on anymore.
- Custom agreements and security questionnaires are only handled for orders $12,000 and above.
The migration prompt we built
When we were migrating Mantis Free, we kept doing the same mental work file-by-file: which Grid props need updating, which icons got renamed, are there any custom keyboard handlers that will now fight with the new roving tabIndex, and so on. So we wrote it down as a prompt.
The idea is simple: you drop this into any IDE as a .prompt.md file (or paste it directly into any AI assistant), point it at a file, and it handles the migration for that scope. It doesn’t just fix syntax, it’s instructed to reason about behavior, flag ambiguous cases with a TODO instead of guessing, and leave a summary of every change made.
Here’s the full prompt:
---
mode: 'agent'
description: 'Migrate a React component from Material UI v7 to v9'
---
You are a senior React developer migrating a codebase from
Material UI v7 to Material UI v9 and MUI X v9.
Your job: analyze the provided file and apply all necessary
v9 migration changes. Don't just fix syntax, reason about
what the component is doing and make sure behavior is
preserved after migration.
Breaking changes to handle
--------------------------
Grid
- Remove all item props
- Replace xs/sm/md/lg/xl with the size prop:
<Grid size={{ xs: 12, sm: 6 }}>
- Remove GridLegacy imports, replace with Grid
System props
- Run codemod first:
npx @mui/codemod@latest v9.0.0/system-props <path>
- Then verify manually, codemods miss complex compositions
Deprecated props
- Accordion: check for TransitionComponent, TransitionProps
- Tabs, Stepper, MenuList: verify custom keyboard handlers
aren't conflicting with new roving tabIndex behavior
Icons
- Remove imports ending in Outline (without the d)
- InfoOutline → InfoOutlined, etc.
ListItemIcon
- min-width changed 56px → 36px
- Check hardcoded spacing that assumed the old value
TablePagination
- Numbers now formatted with Intl.NumberFormat
- Pass labelDisplayedRows to opt out if needed
Charts (MUI X)
- Remove deprecated entry points, use Charts* APIs
- Keyboard nav is on by default, verify with your layout
What to return
--------------
1. The fully migrated file
2. A brief summary of every change made and why
3. Flag anything that needs manual review, especially
custom theme overrides that interact with changed defaults
Rules
-----
- Preserve existing functionality, this is behavior-preserving
- Don't refactor unrelated code
- For anything ambiguous, leave a TODO comment explaining why,
don't guessWe tested this prompt with Claude Sonnet 4.6. Give it a try.
We used this on Mantis Free
We used this prompt ourselves to migrate our Mantis Free React Admin Template to Material UI v9. Most of it was handled cleanly by the prompt. The spots that needed manual attention were custom theme overrides and a couple of Chart tooltip patterns under the new ChartsLayerContainer model.
Comments