A comprehensive, pure ESM library of Google Material Design 3 components. Zero build step required, completely framework-agnostic, and beautifully expressive.
npm install material-esm/material
Runs natively in modern browsers with standard ESM imports and import maps.
Full support for modern wavy tracks, morphing loaders, and connected button groups.
Standard Web Components compatible with React, Vue, Svelte, Lit, or vanilla HTML.
Full keyboard navigation, ARIA semantics, focus rings, and high-contrast styling.
A pure, standalone implementation continuing Google's Material Web project, optimized for the modern ECMAScript module ecosystem.
Drop in a single importmap in your HTML and start writing custom elements right away. No webpack, Vite, or Node compilation required for rapid prototyping or production apps.
Features the cutting-edge Material 3 Expressive spec: dynamic waveform progress indicators, shape-morphing loaders, spring physics, and modern button group corner radii.
CSS custom property token system allows one-line color customization, seamless system dark mode adaptability, and full Material 3 tonal palette integration.
Works flawlessly across all frontends: vanilla JS, React, Vue, Angular, Svelte, Solid, Astro, or server-rendered frameworks like Go, Ruby on Rails, Django, and PHP.
Import only the individual elements you use—such as material/buttons/button.js—keeping your
page weight featherlight with zero unnecessary bundle bloat.
While the original Google repository paused updates, Material ESM continues active development, resolving issues, supporting forms, and implementing new M3 specifications.
Choose your preferred integration method—from zero-build CDN to npm package managers.
Add the importmap to your HTML <head> and immediately import components:
<!-- 1. Add Importmap in <head> -->
<script type="importmap">
{
"imports": {
"lit": "https://cdn.jsdelivr.net/npm/lit@3/index.js",
"lit/": "https://cdn.jsdelivr.net/npm/lit@3/",
"@lit/localize": "https://cdn.jsdelivr.net/npm/@lit/localize/lit-localize.js",
"@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2/reactive-element.js",
"@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2/",
"lit-element/lit-element.js": "https://cdn.jsdelivr.net/npm/lit-element@4/lit-element.js",
"lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3/lit-html.js",
"lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3/",
"material/": "https://cdn.jsdelivr.net/gh/material-esm/material@3/"
}
}
</script>
<!-- 2. Import components anywhere -->
<script type="module">
import 'material/buttons/button.js'
import 'material/text/text-field.js'
</script>
<!-- 3. Use components directly -->
<md-text-field label="Your Name"></md-text-field>
<md-button color="filled">Submit</md-button>Install via npm or yarn for Vite, Next.js, Rollup, or webpack setups:
# Install with npm
npm install material-esm/material
# Or with pnpm / yarn
pnpm add material-esm/material
// In your application code (React, Vue, Svelte, Vite):
import 'material/buttons/button.js'
import 'material/text/text-field.js'
import 'material/indicators/progress.js'Serve the repository directly from your local static assets directory:
<!-- Point importmap to your local vendor directory -->
<script type="importmap">
{
"imports": {
"lit": "https://cdn.jsdelivr.net/npm/lit@3/index.js",
"lit/": "https://cdn.jsdelivr.net/npm/lit@3/",
"material/": "./vendor/material/"
}
}
</script>Explore live Material 3 components running in your browser.
<md-carousel layout="multi-browse" indicators loop> <md-carousel-item headline="Mountain
Vista"> <img src="photo.jpg" /> </md-carousel-item> </md-carousel>
<md-progress type="linear" shape="wavy" indeterminate></md-progress> <md-loading
contained></md-loading>
<md-button color="filled">Filled</md-button> <md-button-group connected checkmark>
<md-button color="tonal" selected>Option 1</md-button> </md-button-group>
<md-fab variant="primary" label="New Item" extended> <md-icon
slot="icon">edit</md-icon> </md-fab>
<md-text-field label="Full Name" supporting-text="..."></md-text-field> <md-text-field
color="filled" label="Email"></md-text-field>
<md-switch selected icons></md-switch> <md-checkbox checked></md-checkbox>
<md-slider value="65" labeled></md-slider>
<md-card type="outlined"> <h4>Card Header</h4> </md-card>
<md-chip type="filter" label="Filter" selected></md-chip> <md-badge
value="5"></md-badge>
<md-list> <md-list-item> <md-icon slot="start">widgets</md-icon> <div
slot="headline">Title</div> <div slot="supporting-text">Subhead</div>
</md-list-item> </md-list>
Interact with complete application layouts and dedicated component testbeds.
The full kitchen-sink sandbox showcasing responsive navigation rail, app bar, search, and form inputs.
Multi-browse, uncontained, and hero carousel layouts with touch/drag snapping and pagination indicators.
Mobile drawer toggle, responsive navigation rail, action items, and collapsible top bars.
Interactive calendar grid, year/month switching, date ranges, and dialog modal pickers.
Clock dial selection, AM/PM toggle, direct numeric keyboard input, and modal dialogues.
Single-line, two-line, and three-line lists with leading avatars, icons, badges, and trailing controls.
Comprehensive documentation and usage guides for each component in the library.