This document provides an introduction to the MUI monorepo, explaining its purpose, organization, and structure. It covers the core component libraries, advanced MUI X packages, and the infrastructure that supports development and distribution.
For detailed information about:
The MUI monorepo at https://github.com/mui/material-ui contains a comprehensive ecosystem of React UI component libraries and supporting infrastructure. The repository is structured as a pnpm workspace managed by Lerna, hosting multiple independently publishable packages that share common development tooling and documentation. It serves as a single source for both open-source UI libraries and commercial packages with integrated documentation and testing. package.json2-15 pnpm-lock.yaml1-5
The repository supports two primary product lines:
This document provides an overview; deeper information is available in child pages.
Sources: package.json2-15 pnpm-lock.yaml1-5 packages/mui-material/package.json2-6 docs/package.json40-48
MUI Core consists of foundational and feature-complete React component libraries under the MIT license:
@mui/material: Flagship package implementing Google's Material Design components.@mui/system: Styling primitives and CSS utilities powering all MUI component styling.@mui/utils: Utility functions and React hooks for internal and external use.@mui/lab: Experimental components under active development.@mui/icons-material: Official Material Design icons as React SVG components.These packages depend on each other in a layered architecture from foundation utilities, style engines, to components.
Title: MUI Core Layered Architecture
Sources: packages/mui-material/package.json2-48 packages/mui-system/package.json2-90 packages/mui-utils/package.json2-74 packages/mui-lab/package.json2-102 packages/mui-icons-material/package.json2-88 packages/mui-codemod/package.json2-55
MUI X offers advanced, commercial-grade components primarily for enterprise use cases such as data grids, date pickers, and charts. Although maintained in a separate repository, its packages are integrated as dependencies in the documentation for unified developer experience.
| Package | Version | Purpose |
|---|---|---|
@mui/x-charts | 9.10.1 | Chart components for visualization |
@mui/x-data-grid | 9.10.1 | Data grid with sorting, filtering |
@mui/x-data-grid-generator | 9.10.1 | Utilities for generating grid data |
@mui/x-data-grid-premium | 9.10.1 | Premium grid features |
@mui/x-data-grid-pro | 9.10.1 | Pro grid features |
@mui/x-date-pickers | 9.10.1 | Date and time picker components |
@mui/x-date-pickers-pro | 9.10.1 | Pro features for date pickers |
@mui/x-license | 9.10.1 | Licensing utilities for MUI X |
@mui/x-tree-view | 9.10.1 | Tree view components for hierarchical data |
Sources: docs/package.json40-48
The monorepo is structured to separate packages, internal tooling, documentation, and tests into distinct directories for clarity and maintainability. This enables shared tooling, consistent dependency management, and orchestrated builds.
Title: Monorepo Directory Organization
packages/: Hosts publishable npm packages such as @mui/material, @mui/system, @mui/utils, and others.packages-internal/: Contains internal packages and utilities not meant for direct public use, including build scripts and documentation tools.docs/: The Next.js based documentation site serving content for all MUI products.test/: Contains integration tests, bundle size checks, and end-to-end test suites.Sources: package.json1-58 packages-internal/scripts/package.json1-30 docs/package.json1-74 packages/mui-material/package.json1-17 packages/mui-system/package.json1-17 packages/mui-utils/package.json1-17 packages/mui-icons-material/package.json1-19 packages/mui-lab/package.json1-19 packages/mui-codemod/package.json1-23
The repository uses pnpm as the package manager providing fast installs and workspace package linking. Lerna orchestrates versioning, running scripts, and publishing packages to NPM.
Key scripts defined in the root package.json include:
| Task | Command | Tool / Invocation |
|---|---|---|
| Build all packages | pnpm build | Uses lerna run build --ignore docs |
| CI Build | pnpm build:ci | Parallelized build with lerna, skipping cache |
| Release version bump | pnpm release:version | Runs lerna version with options to control tagging |
| Publish releases | pnpm release:publish | Uses code-infra publish to create GitHub releases |
| API documentation prep | pnpm docs:api | Runs scripts to generate API docs from source |
| LLM docs generation | pnpm docs:llms:build | Generates documentation tailored for language models |
Sources: package.json6-21
Dependencies between internal packages use the workspace: protocol to enforce local package usage during development, facilitating fast iteration and consistent versioning.
Example excerpt from @mui/material dependencies:
This ensures the local, possibly unpublished, packages are used during development.
Sources: packages/mui-material/package.json35-40 pnpm-lock.yaml95-100
./src/index.js./ButtonBase/TouchRipple.@mui/system and utility packages for styling and theming.Sources: packages/mui-material/package.json5-120
sx prop and breakpoint utilities.createTheme and RtlProvider.Sources: packages/mui-system/package.json5-90
deepmerge, hooks like useId, and composition helpers.Sources: packages/mui-utils/package.json5-74
jscodeshift for automated source transformations.Sources: packages/mui-codemod/package.json5-55
Sources: packages/mui-icons-material/package.json5-88
Sources: packages/mui-lab/package.json5-103
The @mui/internal-scripts package provides shared scripts for building packages, generating prop-type documentation from TypeScript, and other build-time tooling not published publicly.
Sources: packages-internal/scripts/package.json1-30
Automated API documentation is generated via scripts and integrated into the Next.js docs site.
docs:api runs the API documentation generator to extract prop types and component information.docs:llms:build creates documentation formatted for language models and AI tools.Sources: package.json19-21 packages-internal/scripts/package.json1-30
The monorepo is currently at major version 9.x (e.g., 9.3.0). Releases follow a controlled process:
code-infra tool handles publishing and GitHub release creation.Release-related scripts include:
release:version for version bumping without publishing.release:build to build all packages.release:changelog to generate changelogs.release:publish to publish packages to npm and create GitHub releases.canary:release for pre-release publishing.Sources: package.json3-75 CHANGELOG.md1-70
This overview should guide users and contributors to understand the scope, organization, and high-level architecture of the MUI monorepo. For detailed navigation of the repository structure, package relations, and development workflow, please see the child pages:
Sources:
Refresh this wiki
This wiki was recently refreshed. Please wait 2 days to refresh again.