MUI (Material UI)

# MUI (Material UI) — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by MUI. "MUI (Material UI)" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** MUI (Material UI)
**Owner:** MUI
**Official documentation:** https://mui.com/
**Visual character:** Material's grammar in React clothing: Roboto, layered paper elevation, and a theme object every startup has forked at least once.

---

## Summary

The most-installed React component library, anchored on Material.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary | `#1976d2` | `--mui-palette-primary-main` | Primary actions (default theme) |
| Secondary | `#9c27b0` | `--mui-palette-secondary-main` | Secondary accent |
| Error | `#d32f2f` | `--mui-palette-error-main` | Errors |
| Warning | `#ed6c02` | `--mui-palette-warning-main` | Warnings |
| Success | `#2e7d32` | `--mui-palette-success-main` | Success |
| Background | `#ffffff` | `--mui-palette-background-default` | Page background |
| Text Primary | `rgba(0,0,0,0.87)` | `--mui-palette-text-primary` | Primary text |
| Divider | `rgba(0,0,0,0.12)` | `--mui-palette-divider` | Dividers and borders |

## Typography

- **Body:** Roboto — weights 300, 400, 500, 700 — `Roboto, 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `96px` | `112px` |
| h3 | `48px` | `56px` |
| h5 | `24px` | `32px` |
| body1 | `16px` | `24px` |
| body2 | `14px` | `20px` |
| caption | `12px` | `20px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `32px` · `40px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |
| chip/full | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| elevation-1 | `0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12)` |
| elevation-8 | `0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12)` |

## Motion

| Name | Value |
| --- | --- |
| shorter | `200ms` |
| standard | `300ms cubic-bezier(0.4, 0, 0.2, 1)` |

## Quick start (CSS)

```css
/* MUI (Material UI) — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://mui.com/ */

:root {
  /* Color */
  --mui-palette-primary-main: #1976d2; /* Primary actions (default theme) */
  --mui-palette-secondary-main: #9c27b0; /* Secondary accent */
  --mui-palette-error-main: #d32f2f; /* Errors */
  --mui-palette-warning-main: #ed6c02; /* Warnings */
  --mui-palette-success-main: #2e7d32; /* Success */
  --mui-palette-background-default: #ffffff; /* Page background */

  /* Typography */
  --font-body: Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-h1: 96px /* line-height 112px */;
  --text-h3: 48px /* line-height 56px */;
  --text-h5: 24px /* line-height 32px */;
  --text-body1: 16px /* line-height 24px */;
  --text-body2: 14px /* line-height 20px */;
  --text-caption: 12px /* line-height 20px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* Radius */
  --radius-default: 4px;
  --radius-chip-full: 9999px;

  /* Elevation */
  --shadow-elevation-1: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
  --shadow-elevation-8: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);

  /* Motion */
  --motion-shorter: 200ms;
  --motion-standard: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
```

## Origin

Material-UI started as a community implementation of Google's Material Design in React. It is now operated by MUI as an independent company shipping a free open-source core (`@mui/material`) plus paid commercial layers (MUI X for advanced data grids, charts, date pickers).

## Governance

Independent company with a paid product layer. Active maintainer team, rigorous semver. The core MUI v5+ is stable; the community Joy UI and unstyled (Base UI) layers are also developed by the same team.

## Known for

- Theming engine — MUI's `createTheme` + sx prop is one of the most flexible runtime theming setups in React.
- MUI X DataGrid Pro/Premium — the most capable data grid in the React ecosystem, period.
- Documentation depth — MUI's docs are unusually thorough about edge cases, performance, and customization.

## Underrated

- Base UI (the unstyled layer) is a credible alternative to Radix for headless component primitives.
- Joy UI — the team's experiment with a non-Material aesthetic — produces some of the cleanest defaults in the React ecosystem.

## Watch out for

- MUI X advanced features sit behind a license. Plan licensing before adoption if your product needs Pro/Premium grids.
- The Material aesthetic carries strong opinions; significant theming is needed to escape the Material look.

## Components worth studying

- **DataGrid (MUI X)** — Virtualized, server-side, multi-column data grid — Premium tier handles tens of thousands of rows.
- **Autocomplete** — Async, multi-select, keyboard-accessible with virtualization built in.
- **DatePicker (MUI X)** — Localized, accessible date picker with range support.

## When to choose MUI (Material UI)

Pick MUI when you need a comprehensive component library quickly and Material's defaults are acceptable (or you have time to retheme). The MUI X DataGrid alone is reason enough for many enterprise teams. Don't pick it if you want a maximally lightweight bundle.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of MUI (Material UI) by MUI — The most-installed React component library, anchored on Material. Character: Material's grammar in React clothing: Roboto, layered paper elevation, and a theme object every startup has forked at least once. Use a primary colour near #1976d2, the typeface "Roboto" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px base. Lean into what it's known for: Theming engine — MUI's `createTheme` + sx prop is one of the most flexible runtime theming setups in React. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [MUI docs](https://mui.com/)
- [MUI on GitHub](https://github.com/mui/material-ui)
- [MUI X DataGrid](https://mui.com/x/react-data-grid/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/mui) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._