mui/material-ui

This repository is the core codebase for the Material UI component library, providing a comprehensive suite of React UI components, styling utilities, and theming engines. It includes extensive tooling for documentation generation, automated API reference creation, and migration codemods to assist developers in upgrading versions. The system also maintains a collection of starter examples and integration packages for modern frameworks like Next.js, Remix, and Vite, alongside internal infrastructure for testing, security, and build optimization.

15 changes.

This period focused on migrating Material UI components to support CSS variables for flexible theming and restructuring internal packages like system, utils, and types for better modularity and TypeScript safety. The team also expanded developer tooling by adding codemods for API migrations, environment diagnostics, and comprehensive examples for modern frameworks like Next.js and Gatsby.

14 changes.

This period focused on modernizing framework-specific examples by migrating Next.js projects to the App Router and introducing new Vite and Remix templates, all leveraging Material-UI v5 patterns like CSS variables and the sx prop. The team also launched official integration packages for Next.js and Pigment CSS to streamline server-side rendering and styling adoption. Underlying infrastructure was updated with new internal tooling for documentation generation and TypeScript 6 compatibility to support these changes.

5 changes.

This period focused on modernizing the Material UI example stack by migrating from Create React App to Vite and Tailwind CSS. Significant effort was also directed toward enhancing developer resources through the introduction of internal tooling for automated API documentation generation and LLM-optimized content. Additionally, the codebase addressed specific styling issues with a new RTL plugin for CSS layers and expanded the core documentation infrastructure.

The repository now includes a \.browserslistrc\ file that explicitly defines supported browser versions (including Chrome, Firefox, Safari, Edge, and their mobile variants) and a \.editorconfig\ file to enforce consistent coding styles such as Unix-style newlines and indentation. These files provide a single source of truth for build tooling and editor configuration, ensuring consistent output and formatting across different development environments.

(repo-wide) · high confidence

This change introduces a new example application demonstrating how to integrate Material-UI with Remix using TypeScript. It includes the full entry points for client hydration and server-side rendering, ensuring proper CSS extraction and injection via Emotion. The example features a custom theme with CSS variables enabled, a layout component, and basic routing (index and about pages) to showcase standard Material-UI components within a Remix architecture.

examples/material-ui-remix-ts · high confidence

A new Vite-based example for Material-UI has been added to the repository. This example demonstrates a React application setup using Vite, featuring a custom theme that enables CSS variables (\cssVariables: true\) and utilizes the modern \sx\ prop for styling instead of legacy system props. The implementation includes a standard entry point with \ThemeProvider\ and \CssBaseline\, along with sample components like \App\, \ProTip\, and \Copyright\ to illustrate basic layout and theming.

examples/material-ui-vite · high confidence

A new example project has been added at \examples/material-ui-vite-ts\ demonstrating how to integrate Material UI with Vite and TypeScript. The example includes the necessary entry points (\main.tsx\, \App.tsx\) and type declarations (\vite-env.d.ts\) to run a basic Material UI application using the modern Vite build toolchain.

examples/material-ui-react-router-ts, examples/material-ui-vite-ts · high confidence

New example projects have been added to the repository to help developers get started with Material UI on different frameworks. This includes a server-side rendering example using Express.js, a static site generation example using Gatsby, and multiple Next.js examples covering both the Pages Router (in JavaScript and TypeScript) and the App Router (in JavaScript and TypeScript). Additionally, a migration example is provided to assist with upgrading from Material UI v4 to v5 using the legacy @mui/styles package.

examples · high confidence

A new \@mui/envinfo\ package has been added to help users diagnose environment issues when reporting MUI bugs. Running \npx @mui/envinfo\ prints system details (OS, Node, npm/pnpm versions), browser versions, and installed MUI-related packages (including \@mui/\\, \@toolpad/\\, \@pigment-css/\\, \@base-ui/\\, React, Emotion, styled-components, and TypeScript) to the console. The tool supports a \--json\ flag for machine-readable output and is accompanied by tests to verify that the expected environment information is correctly captured.

packages/mui-envinfo · high confidence

This release adds the new @mui/material-nextjs package, providing official integration between Material UI and Next.js. It includes dedicated providers for both the App Router (AppRouterCacheProvider) and the Pages Router (AppCacheProvider, createEmotionCache) to handle server-side rendering and style injection correctly. The package also introduces an escapeHtmlInCss utility to prevent style injection vulnerabilities by escaping HTML tags within CSS content, and supports CSS layers for style ordering.

packages/mui-material-nextjs · high confidence

A new package, @mui/material-pigment-css, has been added to provide a wrapper over Pigment CSS that exposes theming and styling APIs similar to @mui/system. This package re-exports core layout components (Box, Container, Grid, Stack) from @pigment-css/react and re-exports the RtlProvider from @mui/system, allowing users to adopt the new styling engine while maintaining familiar component interfaces.

packages/mui-material-pigment-css · high confidence

Material UI introduces a new \@mui/stylis-plugin-rtl\ package to handle right-to-left styling. This plugin resolves issues where RTL transformation failed when using CSS layers, ensuring that directional properties (like padding and margins) are correctly flipped in layered stylesheets, keyframes, and media queries.

packages/mui-stylis-plugin-rtl · high confidence

The @mui/styled-engine package now exports a GlobalStyles component that applies styles globally, supporting string, object, and function-based styles with optional default themes. Additionally, StyledEngineProvider now supports an enableCssLayer prop that wraps generated styles in @layer mui to improve cascade control, and uses a dedicated cache key for layered styles to prevent collisions with unlayered styles that could otherwise override MUI's own styles.

packages/mui-styled-engine · high confidence

The core-docs package now includes a complete ad management system (Ad, AdCarbon, AdInHouse, AdManager, AdProvider) that handles Carbon ads, in-house promotions, and adblock detection with Google Analytics integration, alongside a full API documentation rendering suite (ApiPage, ComponentsApiContent, HooksApiContent) with dedicated sections for properties, slots, and classes, plus supporting definition utilities and UI components like ExpandableApiItem and ApiWarningAlert.

packages-internal/core-docs · high confidence

The \@mui/codemod\ package now includes scripts to automate the migration of deprecated \Accordion\ and \Alert\ APIs. The \deprecations/accordion-props\ codemod transforms \TransitionComponent\ and \TransitionProps\ props into the new \slots\ and \slotProps\ structure, while the \deprecations/accordion-summary-classes\ codemod updates CSS selectors and class names (e.g., \contentGutters\ to \gutters\ and \content\). Additionally, the \deprecations/alert-classes\ codemod rewrites deprecated Alert variant and color classes (such as \standardSuccess\) into the new atomic class structure (e.g., \standard\ and \colorSuccess\).

packages/mui-codemod · high confidence

The \packages-internal/api-docs-builder\ package has been introduced to automate the generation of API documentation for MUI components and hooks. This tool parses TypeScript and JavaScript source files using Babel and the TypeScript compiler to extract JSDoc comments, default values, and type information, then generates structured API pages and manifests. It supports features such as automatic demo linking, prop validation, slot and CSS class extraction, and translation of API descriptions into multiple languages.

packages-internal/api-docs-builder · high confidence

The repository introduces several new internal packages to support documentation infrastructure: \@mui/internal-api-docs-builder-core\ provides project settings and component info extraction for Material UI and MUI System API pages; \@mui/internal-core-docs\ hosts core documentation building blocks; \@mui/internal-docs-utils\ (renamed from \docs-utils\) contains shared utilities for docs scripts; and \@mui-internal/markdown\ implements a markdown parser, webpack loader, and translation loader for rendering API descriptions and demos. These packages replace or refactor previous ad-hoc scripts, enabling better modularity and type safety in the docs generation pipeline.

packages-internal · high confidence

The repository now includes a dedicated \scripts/\ directory containing new tooling to support the development workflow. This includes \buildApiDocs\ and \buildLlmsDocs\ for generating API and LLM-optimized documentation, \generateCodeowners\ for maintaining repository ownership, \generateProptypes\ for type conversion, and \releaseChangelog\ and \releasePack\ for managing versioning and publishing. Additionally, \useReactVersion\ handles React dependency resolution, while \test\, \testBuiltTypes\, and \validateTypescriptDeclarations\ ensure test execution and type integrity. A \react-next.diff\ patch is also provided to adjust test expectations for React 18 StrictMode behavior.

scripts · high confidence

Added a new internal script (\generate-llms-txt\) that processes Material UI component documentation to produce \llms.txt\ and markdown files suitable for large language model consumption. The script converts HTML-based API descriptions and prop tables into clean Markdown, resolves demo code snippets (preferring TypeScript over JavaScript), and handles link origins to ensure generated documentation is self-contained and accurate.

packages-internal/scripts/generate-llms-txt · high confidence

This update addresses security vulnerabilities identified by Dependabot by upgrading affected packages. The changes include bumping \next\ to v14.2.7 to resolve a security issue, \vite\ to 5.4.2 for security fixes, \react-router\ to v7.12.0 to address a vulnerability, and \next\ to v15.5.15 to fix a security advisory. Additionally, \esbuild\ is bumped to 0.28.1 and \playwright\ to 1.55.1 to resolve their respective security concerns. These updates ensure the project's dependencies are patched against known security risks.

(dependencies) · high confidence

The package now includes custom SVG icon components for major social platforms (Apple, Facebook, GitHub, Google, Instagram, LinkedIn, Microsoft, Pinterest, Reddit, Telegram, Twitter, WhatsApp, X, and YouTube) in the \custom/\ directory, all updated with the \'use client'\ directive for React Server Components compatibility. Additionally, the icon generation tooling (\builder.mjs\) has been converted to native ESM, replacing the previous CommonJS build script, and the test suite has been migrated to Vitest to align with this module system change.

packages/mui-icons-material · high confidence

The \@mui/styled-engine-sc\ package has been converted from JavaScript to TypeScript. This change provides stricter type checking for the styled-components integration, including improved type definitions for the \styled\ function, \GlobalStyles\, and \StyledEngineProvider\ components. The package now exports TypeScript declaration files and uses Vitest for testing, ensuring better developer experience and type safety when using styled-components with MUI.

packages/mui-styled-engine-sc · high confidence

The date picker components (such as DatePicker, DateTimePicker, and their mobile/desktop variants), along with date adapters (AdapterDateFns, AdapterDayjs, AdapterLuxon, AdapterMoment) and related utilities like LocalizationProvider, have been removed from @mui/lab. These are now available in @mui/x-date-pickers (and @mui/x-date-pickers-pro for range pickers). Importing them from @mui/lab will now trigger a console warning directing you to the new packages. The Masonry component remains in @mui/lab as an incubator component.

packages/mui-lab · high confidence

The \@mui/internal-docs-utils\ package has been updated to use \@typescript/typescript6\ for its TypeScript compiler API interactions, addressing the lack of an importable compiler API in TypeScript 7. This change introduces new internal utilities for documentation generation, including \createTypeScriptProject\ for managing TypeScript program instances, \getPropsFromComponentNode\ for extracting component props via AST analysis, and \ComponentClassDefinition\ for defining component metadata. Additionally, helper functions for handling line endings and Babel generator issues have been added to the public exports.

packages-internal/docs-utils · high confidence

The Netlify deployment now includes hardened serverless functions: the OG image edge function validates and truncates all URL parameters to prevent unbounded rendering work, the feedback management endpoint validates content before posting to Slack and enforces IP-based rate limiting, and the deploy-succeeded function is migrated to an event-triggered handler to trigger E2E tests on PR previews.

netlify · high confidence

The \typescript-to-proptypes\ script has been refactored to use the \@typescript/typescript6\ compiler API and the \es-toolkit\ library, replacing previous dependencies. This internal tool now supports generating \PropTypes\ for \undefined\ types and \React.ComponentType\, and improves JSDoc handling by deduplicating comments in merged declarations and selecting the most comprehensive JSDoc for overloaded signatures. The change also adds support for \instanceof\ checks in generated proptypes and ensures better integration with Babel-based prop-type removal plugins.

packages-internal/scripts/typescript-to-proptypes · high confidence

The new @mui/types package provides utility types for MUI, including a new module-augmentation-based approach for OverridableComponent (OverridableComponentAugmentation.ts) intended to improve performance, alongside the core type definitions in index.ts. This introduces behavioral changes to how component props are resolved when a custom component is passed via the \component\ prop, specifically altering the handling of refs and prop merging through OverrideProps and DefaultComponentProps. The package also includes tests to ensure type strictness.

packages/mui-types · high confidence

The @mui/system package has been reorganized, introducing new layout components (Box, Container, Grid) and a dedicated @mui/private-theming package for internal theme context management. The Box component now supports logical spacing properties and CSS variables with nested selectors, while the Grid component has been updated to support the new sizing and offset features. Additionally, the GlobalStyles component now supports modular CSS layers via the theme's modularCssLayers flag, and a new DefaultPropsProvider enables theme-based default prop resolution for Pigment CSS integration.

packages/mui-system · high confidence

The @mui/utils package has been converted to TypeScript and reorganized into a modular structure with individual entry points for each utility (e.g., @mui/utils/composeClasses). This update includes a shadow DOM-aware contains utility that correctly detects element containment across shadow root boundaries, and a deepmerge function that prevents prototype pollution vulnerabilities while skipping deep cloning of React elements and components.

packages/mui-utils · high confidence

Material UI components have been converted to support CSS variables, enabling them to work with the new CSS extraction and theme variable system. This change allows for more flexible theming and better performance by reducing the need for JavaScript-based style overrides. Users can now leverage CSS variables for dynamic theming and improved compatibility with modern CSS features.

packages/mui-material · high confidence

The Material UI example in the \examples/material-ui-vite-tailwind-ts\ directory has been updated to use Vite as the build tool and Tailwind CSS for styling, replacing the previous Create React App setup. The new implementation includes a Vite-specific entry point (\main.tsx\), Tailwind configuration (\index.css\), and updated component files (\App.tsx\, \PopoverMenu.tsx\, \ProTip.tsx\) that demonstrate the integration of Material UI components with Tailwind utility classes.

examples/material-ui-vite-tailwind-ts · high confidence

The Material-UI Next.js TypeScript example has been migrated to the Next.js App Router, introducing a new layout structure that integrates the \AppRouterCacheProvider\ and \InitColorSchemeScript\ for proper server-side rendering and client-side hydration. A key behavioral addition is the inclusion of a \ModeSwitch\ component, allowing users to toggle between light, dark, and system theme modes via the \useColorScheme\ hook. The example also adopts CSS variables for theming, utilizes the \sx\ prop for styling, and removes hardcoded color overrides in favor of semantic theme tokens.

examples/material-ui-nextjs-ts · high confidence

The Next.js Pages Router example has been simplified and modernized. It now uses TypeScript and leverages Material UI's CSS variables feature for theming, replacing the previous approach. The example includes new components for copyright, custom linking, and a pro-tip, providing a cleaner starting point for users.

examples/material-ui-nextjs-pages-router-ts · high confidence

The test utilities now include a dedicated module for parsing the React version string, exposing the major and minor version numbers. This change ensures that internal tests can reliably detect the running React version, supporting compatibility checks across different React releases.

packages-internal/test-utils · high confidence

The Material-UI Next.js TypeScript example has been updated to align with Material-UI v5 conventions. The theme configuration now enables CSS variables via \cssVariables: true\ and uses the Next.js font loader for Roboto. Component implementations have been modernized: the custom link wrapper now integrates \@mui/material/Link\ with Next.js routing, the copyright component uses the \sx\ prop for styling instead of legacy system props, and the theme file reflects the new v5 structure.

examples/material-ui-nextjs-ts-v4-v5-migration · high confidence

The Next.js Pages Router example has been refreshed to align with current best practices. The theme configuration now enables CSS variables via \cssVariables: true\ and integrates the Roboto font using Next.js's native font loading. Component implementations have been updated to use the \sx\ prop for styling instead of legacy system props, and a new custom \Link\ component has been introduced to properly bridge Next.js routing with Material-UI's styling and active-state handling.

examples/material-ui-nextjs-pages-router · high confidence

The test suite now includes a bundle-size checker configuration that measures the size of key packages like @mui/material, @mui/lab, and @mui/system, and a new set of bundling fixtures. These fixtures act as smoke tests to verify that the package layout is correct across various build tools and environments, including Vite, esbuild, Snowpack, Gatsby, Next.js (with both Webpack 4 and 5), and Node.js (both CJS and ESM).

test · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 37 → 62 (+24.7)
• Rubric changed (rubric-2026.08.15 → rubric-2026.09.15) — scores are not directly comparable.

• Code Health 55 → 65 (+9.7)
• Architecture 76 (new)
• Maturity 76 → 77 (+1.5)
• Readiness 25 → 55 (+30.0)
• Security 38 → 65 (+27.5)
• Accessibility 75 (new)

• Change coupling: BasePopper.types.ts ↔ Portal.tsx (packages/mui-material/src/Popper/BasePopper.types.ts)
• Change coupling: BasePopper.types.ts ↔ useSlider.ts (packages/mui-material/src/Popper/BasePopper.types.ts)
• Change coupling: ClickAwayListener.tsx ↔ BasePopper.types.ts (packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx)
• Change coupling: createPalette.d.ts ↔ experimental_extendTheme.js (packages/mui-material/src/styles/createPalette.d.ts)
• Change coupling: useBadge.ts ↔ BasePopper.types.ts (packages/mui-material/src/Badge/useBadge.ts)
• Change coupling: useModal.ts ↔ BasePopper.types.ts (packages/mui-material/src/Modal/useModal.ts)
• Change coupling: useModal.ts ↔ FocusTrap.types.ts (packages/mui-material/src/Modal/useModal.ts)
• Change coupling: useModal.types.ts ↔ BasePopper.types.ts (packages/mui-material/src/Modal/useModal.types.ts)
• Change coupling: useModal.types.ts ↔ FocusTrap.types.ts (packages/mui-material/src/Modal/useModal.types.ts)
• Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
• Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
• Dimension evaluation failed
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• …and 86 more

• (anonymous) (cognitive 16) (packages/mui-material/src/ButtonGroup/ButtonGroup.js)
• (anonymous) (cognitive 16) (packages/mui-material/src/Slide/Slide.js)
• (anonymous) (cognitive 17) (packages/mui-material/src/Switch/Switch.js)
• (anonymous) (cognitive 17) (packages/mui-material/src/Tab/Tab.js)
• (anonymous) (cognitive 18) (packages/mui-material/src/FilledInput/FilledInput.js)
• (anonymous) (cognitive 21) (packages/mui-material/src/ToggleButton/ToggleButton.js)
• (anonymous) (cognitive 33) (packages/mui-material/src/Button/Button.js)
• (anonymous) (cognitive 36) (packages/mui-material/src/PaginationItem/PaginationItem.js)
• (anonymous) (cognitive 45) (packages/mui-material/src/Chip/Chip.js)
• (anonymous) (cyclomatic 16) (packages/mui-material/src/AppBar/AppBar.js)
• (anonymous) (cyclomatic 17) (packages/mui-material/src/ButtonGroup/ButtonGroup.js)
• (anonymous) (cyclomatic 17) (packages/mui-material/src/ListItemButton/ListItemButton.js)
• (anonymous) (cyclomatic 17) (packages/mui-material/src/MenuItem/MenuItem.js)
• (anonymous) (cyclomatic 18) (packages/mui-material/src/Switch/Switch.js)
• (anonymous) (cyclomatic 20) (packages/mui-material/src/FilledInput/FilledInput.js)
• (anonymous) (cyclomatic 23) (packages/mui-material/src/Tab/Tab.js)
• (anonymous) (cyclomatic 24) (packages/mui-material/src/ToggleButton/ToggleButton.js)
• (anonymous) (cyclomatic 34) (packages/mui-material/src/Button/Button.js)
• (anonymous) (cyclomatic 41) (packages/mui-material/src/PaginationItem/PaginationItem.js)
• (anonymous) (cyclomatic 49) (packages/mui-material/src/Chip/Chip.js)
• …and 1148 more

• 216 commits — 190 feature/other, 26 fixes

• (root) — 91 commits
• packages/mui-material — 36 commits
• docs/data — 22 commits
• test/regressions — 13 commits
• .github/workflows — 11 commits
• packages-internal/core-docs — 10 commits
• .circleci/config.yml — 5 commits
• docs/pages — 4 commits
• packages/mui-system — 4 commits
• netlify/functions — 3 commits
• packages/mui-lab — 2 commits
• packages/mui-utils — 2 commits
• .agents/skills — 1 commit
• .github/ISSUE_TEMPLATE — 1 commit
• docs/public — 1 commit
• docs/src — 1 commit
• netlify/edge-functions — 1 commit
• packages-internal/api-docs-builder — 1 commit
• packages-internal/waterfall — 1 commit
• packages/mui-codemod — 1 commit

• fix: [Button] Fix loading-position style leaking to non-loading buttons (#49182)
• fix: [Select] Fix flaky opening mouseup timing (#49024)
• fix: [button base] Fix LazyRipple retaining event objects when ripples are disabled (#49000)
• fix: [ci] Add the Claude CI flake-fix caller (#49197)
• fix: [code-infra] Fix new image loading flake after font loading changes (#49042)
• fix: [code-infra] Fix team sync review requests (#48914)
• fix: [docs] Fix @mui/lab version in v7.3.6 changelog (#49145)
• fix: [docs] Fix Next.js font optimization docs to preserve typography letter-spacing (#48488)
• fix: [docs] Fix broken links reported by Ahrefs (#48949)
• fix: [docs] Fix the LLM generated docs paths (#49076)
• fix: [docs] Fix the dead Popper.js documentation links (#49081)
• fix: [docs][Table] Fix wrong number of rows reported to screen readers (#47653)
• fix: [link] Revert to color-mix when underline color is not accepted (#49077)
• fix: [modal] Fix aria-hidden should not apply on non-portal modals (#49026)
• fix: [styled-engine-sc] Fix types for components extended with styled (#45988)
• fix: [tabs] Fix selected tab not scrolled into view when scroll buttons appear (auto mode) (#48489)
• fix: [test] Add a visual regression fixture for the DocSearch modal (#49002)
• fix: [test] Add an assertions mode to the axe regression harness (#48915)
• fix: [test] Fail the regression run when a webfont does not load (#48948)
• fix: [test] Fix flaky DocSearch modal screenshots (#49122)
• …and 196 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

mui/material-ui was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.