← Tous les projets
mtrl #
Composants Material Design 3 pour le web, écrits en TypeScript. Utilisez-les comme simples fonctions, comme web components, ou comme composants React, Vue, Svelte et Solid — les mêmes composants partout.
Présentation #
mtrl implémente la mise à jour M3 Expressive : tailles, formes, couleurs et animations à ressort des composants suivent les tokens Material 3. Chaque composant est une petite fonction qui renvoie un élément DOM et une API, si bien que mtrl fonctionne avec n'importe quel framework, ou sans.
Les 34 composants existent aussi en éléments personnalisés (<m-button>, <m-select>, …), avec de fins adaptateurs générés pour React, Vue, Svelte et Solid. Angular et tout autre stack utilisent directement les éléments.
Fonctionnalités #
- Material 3 Expressive — composants, tokens et animations suivent la spécification M3 actuelle
- Tous les frameworks, ou aucun — fonctions vanilla, web components, et composants React, Vue, Svelte et Solid
- Personnalisable — tokens de couleur, de police et de forme en propriétés CSS, avec des thèmes M3 générés
- Accessible — clavier et lecteurs d'écran selon les modèles WAI-ARIA, éléments associés aux formulaires
- Rendu serveur — les adaptateurs s'affichent côté serveur puis s'hydratent
- Léger et modulaire — un module par composant, avec des budgets de taille vérifiés en CI
- Zéro dépendance — les frameworks sont des dépendances optionnelles