mdui
<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/> > I am developing mdui v3 based on the M3 Expressive specification. You can follow the mdui v3 development progress [here](https://github.com/users/zdhxiong/projects/9/views/1). During this period, mdui v2 will continue to be updated for bug fixes and new features. <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 - [English](https://www.mdui.org/en/docs/2/) - [简体中文](https://www.mdui.org/zh-cn/docs/2/) ## Installation ```sh npm install mdui --save ``` ## Usage Import CSS and JS: ```js import 'mdui/mdui.css'; import 'mdui'; ``` Use the component: ```html <mdui-button>Button</mdui-button> ``` ## Using CDN ```html <!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](https://github.com/zdhxiong/mdui/blob/v2/packages/mdui/LICENSE)