MDUIDocs mdui 2 Docs mdui 1 Docs Material Design 1 English简体中文LightDarkSystem

Material Design User Interface

Material Design 3 (Material You) UI components, build with Web Components.
Get StartedInstall Github

Web Components

mdui components are build with Web Components, offering simplicity similar to using a <div> tag.

Material You

Following Material Design 3 (Material You) guidelines for a user-friendly, visually pleasing product.

Dynamic Color

Creates a full color scheme from a color or image, usable across all mdui components.

Dark Mode

Supports dark mode and automatic switching based on the system's light/dark preference.


With GZIP, the CSS + JavaScript totals 85KB. Choose selective imports for further size reduction.

IDE Support

Enjoy smooth code hints in VSCode and WebStorm. Use our VSCode extensions and WebStorm plugins for a superior development experience.

Framework Support

mdui smoothly integrates with Vue, React, Angular, and other web apps.

TypeScript Support

Built with TypeScript, mdui provides excellent type hints.

No dependencies

mdui works independently of third-party libraries for quicker load times and less network traffic.

Rich Component Library

mdui offers 30+ components and a dozen utility functions, covering common use cases.

Material Icons

Access over 10,000 icon components, available for selective import.

Ease of Learning

Basic knowledge of HTML, CSS, and JavaScript is sufficient to use mdui.

Donate via Alipay by scanningDonate via WeChat by scanning