npm package: @olton/metroui
Description: A progressive front-end framework for creating high-performance responsive web applications!
Author: Serhii Pimenov
Latest version: 5.1.20

<div align="center">
  <h1 align="center">Welcome to Metro UI!</h1>  
  <h1 align="center"><img src="banner.png" alt="Metro UI"/></h1>  
  <h3>A progressive front-end framework for creating high-performance responsive web applications</h3>

    Sleek, intuitive, and powerful front-end framework for faster and easier web development.
    Build responsive, mobile-first projects on the web 
    with the first front-end component library in Metro Style.

<p align="center">
    <a href="https://v5.metroui.org.ua/"><strong>Explore Docs</strong></a>
    or
    <a href="https://panda.metroui.org.ua/"><strong>View Demo</strong></a>
</p>

</div>

---

<div align="center">

### Project State
![Package Version](https://img.shields.io/github/package-json/v/olton/metroui?label=package&color=purple)
![NPM Version](https://img.shields.io/npm/v/%40olton%2Fmetroui)
![NuGet Version](https://img.shields.io/nuget/v/metroui?label=nuget&color=ff5342)

![Dependencies](https://img.shields.io/badge/Dependencies-none-darklime.svg)
[![Checked with Biome](https://img.shields.io/badge/Checked_with-Biome-60a5fa?style=flat&logo=biome)](https://biomejs.dev)
![Code size](https://img.shields.io/github/languages/code-size/olton/metroui.svg?color=830000)
![GitHub Css Size](https://img.shields.io/github/size/olton/metroui/lib%2Fmetro.css?label=CSS%20Size&color=fd9812)
![GitHub JS Size](https://img.shields.io/github/size/olton/metroui/lib%2Fmetro.js?label=JS%20Size&color=8f99ff)
![GitHub Icons Size](https://img.shields.io/github/size/olton/metroui/lib%2Ficons.css?label=Icons%20Size&color=01796f)
[![Build Status](https://app.cloudback.it/badge/olton/metroui)](https://cloudback.it)
![Website](https://img.shields.io/website/https/metroui.org.ua.svg)
![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?color=7852a9)


</div>

---
> [!IMPORTANT]
> ### License and Premium Features
> This project is licensed under the **MIT** license.
> In addition, **SUPPORT PACK** is available for an annual subscription on [Korzh.com](https://korzh.com/metroui).
> **SUPPORT PACK** includes an **Extra time for priority support** by email and other options.
---

<div align="center">

### Community

Welcome to Metro UI Discord Server!

[![Join the chat at https://discord.gg/QYszPjRP](https://img.shields.io/badge/community-on%20discord-brightgreen.svg?style=flat)](https://discord.gg/cxrhV7pGG8)

</div>

---

### Contributing
All contributions are welcome. Learn more about how you can contribute to this project [here](CONTRIBUTING.md). 

> [!NOTE]
> Before you create Pull Request, you must sign CLA!


---
 
### Docs & Demo

Please click [Documentation](https://v5.metroui.org.ua) and [Demo](https://panda.metroui.org.ua).   

### Releases

Metro UI releases frequently. 
I'm creating release when there are significant bug fixes, new APIs, or components.
The usual frequency of release of the new version is one week on Sundays.

### LTS
**Long-term support** of older versions of Metro UI doesn't currently exist. 
If your current version of Metro UI works for you, you can stay on it for as long as you would like. 
If you want to make use of new features as they come in, you should upgrade to a newer version.


---

<div align="center">

### Browser Compatibility
![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) 
--- | --- | --- | --- | --- |
Latest 2 ✔ | Latest 2 ✔ | Latest 2 ✔ | Latest 2 ✔ | Latest 2 ✔ |

</div>

---
### Previous versions

+ `Metro-UI-CSS-4` - [Repository](https://github.com/olton/Metro-UI-CSS-4), [Documentation](https://v4.metroui.org.ua/)     
+ `Metro-UI-CSS-3` - [Repository](https://github.com/olton/Metro-UI-CSS-3), [Documentation](https://v3.metroui.org.ua/)     
+ `Metro-UI-CSS-2` - [Repository](https://github.com/olton/Metro-UI-CSS-2), [Documentation](https://v2.metroui.org.ua/)     
+ `Metro-UI-CSS-1` - [Repository](https://github.com/olton/Metro-UI-CSS-1) 

### Credits

- Styles created using the [less](http://lesscss.org) preprocessor by [Alexis Sellier](https://github.com/cloudhead)
- preCode by Leon Sorokin [preCode](https://github.com/leeoniya/preCode.js)
- strftime by Tom Doan [strftime](https://github.com/thdoan/strftime)
- function b64toBlob by [Jeremy Banks](http://stackoverflow.com/users/1114/jeremy-banks)
- Date.getWeek by [Nick Baicoianu](http://www.epoch-calendar.com)
- Data source processor by [jQuery](https://jquery.com)
- All who brought something good

### Thanks
Thanks to all. Special thanks to all those who financially supported the project.

---

## Support

If you like this project, please consider supporting it by:

+ Star this repository on GitHub
+ Sponsor this project on GitHub Sponsors
+ **PayPal** to `serhii@pimenov.com.ua`.
+ [**Patreon**](https://www.patreon.com/metroui)
+ [**Buy me a coffee**](https://buymeacoffee.com/pimenov)

---

Copyright (c) 2012-2025 by [Serhii Pimenov](https://pimenov.com.ua). All Rights Reserved.