Skip to content
Back to blog

Material UI v9.0

José Freitas

@joserodolfofreitas
+

Material UI v9 is here. This release focuses on what developers feel immediately: better accessibility defaults, more reliable keyboard navigation, and theming foundations that make CSS integration smoother.

For line‑item changes, follow the Material UI releases timeline.

This new major is part of a coordinated effort across the entire product suite; for a complete look at the MUI ecosystem changes, check out the Introducing Material UI and MUI X v9 blog post.

Table of contents

NumberField

Base UI adoption is expanding across Material UI: for now through component recipes, with more native Material UI surfaces to follow. NumberField is the first new primitive in this cycle built on that stack: a focused control for numeric input with consistent accessibility and styling hooks.

NumberField, implemented on Base UI.

See the NumberField documentation for API details and examples.

Menubar is the other new Base UI-backed surface in v9: a horizontal menu bar pattern with strong keyboard support, aligned with how menus and navigation are modeled in Base UI. On this stack, we can finally support submenus, nested menus off the bar, instead of stopping at a single-level strip.

Menubar with submenus and keyboard-friendly navigation.

Together, NumberField and Menubar show where we're headed in v9: wider Base UI adoption in Material UI, and interactions, including keyboard support, that stay clear and consistent even in dense UIs.

See the Menubar documentation for API details and examples.

Theme and CSS variables

Derived colors with color-mix()

Theme in v9 extends the CSS variables system to generate color-mix() values on top of the default Material UI theme variables. This gives you:

  • More precise control over derived colors.
  • Better integration with design systems that already rely on color-mix() for overlays and surfaces.
  • A path to future optimizations where the theme can encode more semantics into variables rather than relying on ad‑hoc runtime logic.

Tooltip docs clarity and nativeColor fixes

  • Tooltip documentation now describes the visible text triggers more explicitly, clarifying which interactions and DOM structures are supported.
  • We also fixed the nativeColor docs to better reflect how it behaves alongside the CSS variables system.

Current behavior and props are documented on the Tooltip page.

Behind the scenes, we invested in prep work so the codebase could handle the v9 cycle smoothly, including versioning and build changes, plus adjustments that reduce friction for future breaking‑change work.

Interaction and accessibility fixes

These updates focus on small but important behavior changes, especially around accessibility and event handling.

Autocomplete, Backdrop, Tooltip

Autocomplete

  • Prevent menu opening on right-click so context-menu interactions don't unexpectedly toggle the options list.

Backdrop

  • Remove aria-hidden by default so the backdrop is no longer aggressively hiding content from assistive technologies (a11y improvements).

ButtonBase

  • Ensure onClick events propagate correctly when a non‑native button element is clicked.

Dialog and Modal

  • Remove the disableEscapeKeyDown prop.

TableCell and theme – color mixing for borders

  • Apply alpha before color mixing for the border-bottom color when nativeColor and cssVariables are used together.

Theme typing

  • Remove MuiTouchRipple from theme component types.

Tooltip

  • Fix an error when wrapping a disabled input that is focused.

useAutocomplete typing

  • Improve TypeScript typing for useAutocomplete.

Platform cleanup

Platform cleanup and docs infrastructure in v9 focus on cleanup, maintainability, and more efficient developer workflows.

Material UI

  • Clean up duplicated CSS rules to reduce redundancy and keep output styles more predictable.

  • Bundle size improvements.

  • sx prop performance improvements up to 30% for a heavy sx usage (details in PR #44254).

System

  • Refactor the container query sorting regex used in the system layer.

Keyboard navigation

Keyboard navigation and accessibility improvements keep moving the ecosystem forward.

Roving TabIndex across menus and navigation

  • Improved Roving TabIndex keyboard navigation for Stepper, Tabs, and MenuList.
  • Additional accessibility improvements for Stepper, MenuList, and Tabs.

Improved roving TabIndex focus is a key v9 highlight for keyboard-first components like Menu, Stepper, and Tabs.

Autocomplete

  • Add a root slot.
  • Support full slots for clearIndicator and popupIndicator.
  • Fix the popup reopening when the window regains focus with openOnFocus.

CSS rule cleanup (partial revert)

  • Partially revert duplicated CSS rules cleanup, where it proved too aggressive.

Repository note

  • As part of ongoing repository maintenance, we removed Joy UI code and docs from this repo.

Breaking changes and migration

Main breaking changes are related to removal of deprecated props such as component and componentsProps across the library, removal of deprecated system props from layout components, and accessibility improvements for Tabs and Menu.

The main benefit of the breaking changes are ~3% bundle size reduction compared to v7 and overall performance gain.

For a consolidated upgrade path from Material UI v7, follow the Upgrade to v9 migration guide. For earlier majors, find the v6 and v7 upgrade guides.

What's next

  • Remove dependency on Emotion.
  • Performance improvements.
  • Accessibility improvements.
  • Add more components from Base UI.

Further reading

We want your feedback

Your input drives our direction. Join our GitHub communities today to share your insights, report issues, and help shape the future. Visit Material UI on GitHub.