← All projects
mtrl #
Material Design 3 components for the web, written in TypeScript. Use them as plain functions, as web components, or as React, Vue, Svelte and Solid components — the same components everywhere.
Overview #
mtrl implements the M3 Expressive update: component sizes, shapes, colours and spring motion follow the Material 3 tokens. Each component is a small function that returns a DOM element and an API, so mtrl works with any framework or none.
The same 34 components also ship as custom elements (<m-button>, <m-select>, …) with thin generated adapters for React, Vue, Svelte and Solid. Angular and any other stack use the elements directly.
Features #
- Material 3 Expressive — components, tokens and motion follow the current M3 specification
- Every framework, or none — vanilla factories, web components, and React, Vue, Svelte and Solid components
- Themeable — colour, typeface and shape tokens as CSS custom properties, with generated M3 scheme themes
- Accessible — keyboard and screen reader support per the WAI-ARIA patterns, form-associated elements
- Server rendering — the adapters render on the server and hydrate
- Small and tree-shakeable — one module per component, with size budgets checked in CI
- Zero dependencies — frameworks are optional peer dependencies