Material 3 for the Web

Un système de composants Material Design 3 complet pour le web moderne : des web components Lit (<md-*>) avec des wrappers React de première classe. Pensé comme la cible de migration de MUI + MUI X (Community).

Démarrer Migration MUI → M3

Ce que c’est

Lib Lit self-contained — chaque <md-*> consomme les rôles --md-sys-color-* (≈47, light + dark) émis au runtime ; le reste (typescale, shape, elevation, motion, state) est résolu au compile-time Sass.
Wrappers React (@aphrody-code/m3-react) — un wrapper @lit/react par élément, events custom typés.
Material You runtime (@aphrody-code/m3-tokens) — dérive les rôles de couleur depuis n’importe quelle couleur seed (7 variantes de scheme + niveaux de contraste WCAG).
Couverture MUI + MUI X Community — Data Grid, charts, pickers, tree, scheduler, et la surface @mui/material.

Démarrage

# Toolchain : bun uniquement
bun add @aphrody-code/m3-react @aphrody-code/material-web

import { MdFilledButton, MdOutlinedTextField } from "@aphrody-code/m3-react";

export function Demo() {
  return (
    <form>
      <MdOutlinedTextField label="Email" type="email" />
      <MdFilledButton>Envoyer</MdFilledButton>
    </form>
  );
}

Documentation

Guide	Sujet
État des lieux MD3	Panorama Material Design 3 sur le web
Fondations MD3	Référence des fondations de la spec
Tokens & Theming	Tokens `--md-sys-*` et theming
@material/web (Google)	Les Material Web Components
MUI & React	Rapport à MUI / Material UI
Tailwind & MD3	L’écosystème Tailwind face à M3
Panorama & Recommandations	Recommandations d’architecture
Lit — Bonnes pratiques	Référentiel Lit
Stack 2026	Toolchain Bun-native, Rust tooling, cross-platform
Dépendances	Audit et roadmap d’upgrade

Corpus de référence Material Design 3

Les specs M3 distillées (foundations, tokens, styles, layout, motion, composants, parité Angular Material) servant de source de vérité design vivent dans docs/design/ (index : docs/design/README.md).

Migration MUI → Material 3

Le kit de migration complet vit dans le dossier migration/ :

Conventions & mapping : 00-CONVENTIONS.md, 01-component-mapping.md, theming (02), intégration React (03), playbook (04), gap-analysis (05), Tailwind (06).
Couverture : 07-coverage-mui.md (@mui/material v9), 08-coverage-mui-x.md (MUI X Community), 09-coverage-tailwind.md.
Cas réel mesuré : 10-case-study-rpbey.md — un dashboard Next.js MUI v9 passé au codemod (chiffres réels ; le coût dominant est le styling sx, pas la couverture composant).
Icônes / Material Symbols : 11-material-symbols.md — axes variables de md-icon, chargement de police, optimisation, et le codemod @mui/icons-material → Material Symbols (96 % automatique).
Outillage : mui-m3-map.json (mapping consolidé machine-readable) + codemods jscodeshift dans migration/codemods/.