zdhxiong/mdui

Material Design 3(Material You) UI components using Web Components.

TypeScript

4,528

443 commits

updated Jul 21, 2026

See the code

README

mdui logo

mdui

A Material Design 3 (Material You) library of Web Components.
https://www.mdui.org

I am developing mdui v3 based on the M3 Expressive specification. You can follow the mdui v3 development progress here. During this period, mdui v2 will continue to be updated for bug fixes and new features.


npm version CSS gzip size JS gzip size downloads license


  • 🧩 Works with all frameworks
  • 🚛 Works with CDNs
  • 🏙️ Material 3 design system
  • 🌛 Includes dark theme and dynamic color
  • 🆚 Optimized for WebStorm and VSCode
  • 😸 Open source

Docs

Installation

npm install mdui --save

Usage

Import CSS and JS:

import 'mdui/mdui.css';
import 'mdui';

Use the component:

<mdui-button>Button</mdui-button>

Using CDN

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
    <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
  </head>
  <body>
    <mdui-button>Hello, world!</mdui-button>
  </body>
</html>

License

MIT

css
javascript
material
material-design
material-design-3
material-you
web-components

zdhxiong/mdui

Material Design 3(Material You) UI components using Web Components.

TypeScript

4,528

443 commits

updated Jul 21, 2026

See the code

README

mdui logo

mdui

A Material Design 3 (Material You) library of Web Components.
https://www.mdui.org

I am developing mdui v3 based on the M3 Expressive specification. You can follow the mdui v3 development progress here. During this period, mdui v2 will continue to be updated for bug fixes and new features.


npm version CSS gzip size JS gzip size downloads license


  • 🧩 Works with all frameworks
  • 🚛 Works with CDNs
  • 🏙️ Material 3 design system
  • 🌛 Includes dark theme and dynamic color
  • 🆚 Optimized for WebStorm and VSCode
  • 😸 Open source

Docs

Installation

npm install mdui --save

Usage

Import CSS and JS:

import 'mdui/mdui.css';
import 'mdui';

Use the component:

<mdui-button>Button</mdui-button>

Using CDN

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
    <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
  </head>
  <body>
    <mdui-button>Hello, world!</mdui-button>
  </body>
</html>

License

MIT

css
javascript
material
material-design
material-design-3
material-you
web-components

Project health

Overall

2.8/10

Maintained

5/10

Code review

2/10
OpenSSF Scorecard

npm

Latest release

2.1.5 · Jul 14, 2026

Releases this year

1

Significant stargazers

macro

9,446 followers · starred Jun 2017

唯然

445 followers · starred Apr 2024

hustcc

4,438 followers · starred Dec 2016

Stargirl Flowers

2,354 followers · starred Oct 2024