Awesome

<p align="center"> <a href="https://www.mdui.org/"> <img src="https://raw.githubusercontent.com/zdhxiong/mdui/953011ce2911e2e64b6cb242729df82664f6a78a/packages/jetbrains-plugin/src/main/resources/META-INF/pluginIcon.svg" alt="mdui logo" width="165" height="165"/> </a> </p> <h1 align="center">mdui</h1> <p align="center"> A Material Design 3 (Material You) library of Web Components. <br/> <a href="https://www.mdui.org"><strong>https://www.mdui.org</strong></a> <br/> <br/> <a href="https://www.npmjs.com/package/mdui"> <img src="https://img.shields.io/npm/v/mdui.svg" alt="npm version"/> </a> <a href="https://cdn.jsdelivr.net/npm/mdui/mdui.css"> <img src="https://badgen.net/badgesize/gzip/https://cdn.jsdelivr.net/npm/mdui/mdui.css?label=CSS%20gzip%20size" alt="CSS gzip size"/> </a> <a href="https://cdn.jsdelivr.net/npm/mdui/mdui.esm.js"> <img src="https://badgen.net/badgesize/gzip/https://cdn.jsdelivr.net/npm/mdui/mdui.esm.js?label=JS%20gzip%20size" alt="JS gzip size"/> </a> <a href="https://www.npmjs.com/package/mdui"> <img src="https://badgen.net/npm/dt/mdui" alt="downloads"/> </a> <a href="https://github.com/zdhxiong/mdui/blob/v2/packages/mdui/LICENSE"> <img src="https://badgen.net/npm/license/mdui" alt="license"/> </a> </p> <hr/>

🧩 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