materialelements.io v1.2.0

Material UI
as Web Components.

Zero-dependency, framework-agnostic components that are visually identical to MUI. Drop them into any HTML page, React, Vue, Svelte — anywhere.

Get Started Theme Editor

Why materialelements.io?

Zero Dependencies
Pure Web Components built on the Custom Elements v1 spec. No framework, no bundler required.
MUI-Compatible Themes
Pass any MUI theme object directly. Same CSS variables, same palette structure, same token names.
Drop-in Replacement
Swap Button for <me-button>. Familiar API, same visual output, no React required.
TypeScript Native
Written in strict TypeScript with full type exports. Autocomplete for every attribute and property.

40+ Components

Everything you need across six categories.

Buttons Typography Paper Layout TextField Select Checkbox Radio Switch Avatar Badge Chip Table Tooltip Alert Dialog Snackbar Progress App Bar Tabs Drawer Menu Pagination

Quick Start

<!-- 1. Load the bundle (CDN) --> <script src="https://unpkg.com/@materialelements/core/dist/materialelements.min.js"></script> <!-- 2. Wrap your app --> <me-theme-provider> <me-css-baseline></me-css-baseline> <me-button variant="contained">Hello World</me-button> <me-text-field variant="outlined" label="Your name"></me-text-field> <me-alert severity="success">It works!</me-alert> </me-theme-provider>

See It Live

Contained Outlined Text Secondary Success Disabled
A
All components respect the active theme. Change colors in the Theme Editor to see them update everywhere.
Card Component Full-featured card with header, media, content, and actions. Learn More
Accordion Smooth height animation with CSS grid transitions. More Features Controlled, disabled, and "expanded by default" variants available.