Impressive component library for expressive web development

  • By Serhii Pimenov
  • Last update: Jan 7, 2023
  • Comments: 16

Metro 4 Components Library

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.
Explore Metro 4 docs »

Metro 4 is an MIT-licensed open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these
awesome Backers.

Build Status Dependencies CSS gzip size JS gzip size Icons gzip size GitHub release npm version Nuget Website xscode License: MIT GitHub issues GitHub code size in bytes

License and Premium Features

This project licensed under the MIT license. In addition, SUPPORT PACK is available for an annual subscription on XS:CODE and for a Patreon Patrons.

SUPPORT PACK includes an Extra time for priority support by email and other options.

Donation on Patreon

Donations on Patreon Donations on Patreon


Facebook Join the chat at


All contributions are welcome. Learn more about how you can contribute to this project here.

Important! Before you create Pull Request, you must sign CLA!


Please click here for Documentation and Demo.


Metro 4 releases frequently. I Am create 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.


Long term support of older versions of Metro 4 does not currently exist. If your current version of Metro 4 works for you, you can stay on it for as long as you'd like. If you want to make use of new features as they come in you should upgrade to a newer version.

Browser Compatibility

Chrome Firefox Edge Safari Opera
Latest 2 Latest 2 Latest 2 Latest 2 Latest 2

Old version

Metro UI CSS 3.x you can find in a repo Metro-UI-CSS-3
Metro UI CSS 2.x you can find in a repo Metro-UI-CSS-2
Metro UI CSS 0.x you can find in a repo Metro-UI-CSS-095

Documentation and Demo for V3:
Documentation and Demo for V2:
Documentation and Demo for V0:


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


You can read about credits here

2012-2020 © Copyright by Serhii Pimenov. All Rights Reserved. Created by Serhii Pimenov.



  • 1

    Announcement of a new version of the Metro UI CSS

    The new version (1.0) will be available in the next 2 weeks.

    In new version:

    • refactoring and optimization of code
    • multi level dropdown menu
    • new type of menus
    • all windows 8 main colors (45)
    • specific background colors (21) for tiles container with special outline color for tile
    • all javascript plugins as jquery.widget
    • new size of tile
    • If possible, all issues will be considered
    • .....
    • input file
  • 2

    Conflict with javascript function


    First of all congratulate them for this great job.

    I work with Asp.Net Core 3.1 (Razor Pages) and I have a piece of code that gives an error when I load metro.min.js.

    If I comment the line that loads metro.min.js or put my piece of code before loading metro.min.js there is no error.

    The error is as follows: (index):352 Uncaught SyntaxError: Invalid regular expression: / `

        function () {
            var a = this.concat();
            for (var i = 0; i < a.length; ++i) {
                for (var j = i + 1; j < a.length; ++j) {
                    if (a[i] === a[j])
                        a.splice(j--, 1);
            return a;

    ` /: Nothing to repeat at () at (index):352

    My piece of code is in _Layout.cshtml and is as follows:


    <script src="~/_content/Comunes/lib/jquery/dist/jquery.min.js"></script>
    <script src="" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script src="~/_content/Comunes/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/_content/Comunes/lib/metro/js/metro.js"></script>
    <script src="~/_content/Comunes/lib/jsGrid/jsgrid.min.js"></script>
    <script src="~/_content/Comunes/lib/jsGrid/i18n/jsgrid-es.js"></script>
    <script src="~/_content/Comunes/lib/spectrum-colorpicker/spectrum.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/_content/comunes/js/funciones.js" asp-append-version="true"></script>
    <script src="~/_content/comunes/js/ventana.js" asp-append-version="true"></script>
        cultureInfo = '@System.Globalization.CultureInfo.CurrentCulture';
        phFecha = '@System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern';
        phFecha = phFecha.toLowerCase(); // (phFecha = d/mm/yyyy)
        let sFecha = phFecha.split("/");
        for (var i in sFecha) {
            if ("md".search(sFecha[i])) {
                if (sFecha[i].length == 1) {
                    sFecha[i] = sFecha[i].repeat(2);
        phFecha = sFecha[0] + "/" + sFecha[1] + "/" + sFecha[2];


  • 3

    Cannot get Metro UI navigation bar dropdown to work

    I'm having trouble getting the navigation bar to work. I'm using Jquery ver 2.1.1. I've validated that jquery is working (added a little alert for window load). The navigation bar itself is rendering, but the dropdown just does not work. I'm using Visual Studio and installed the package via nuget.

    JS Files included: metro.min.js jquery-2.1.1.js

    CSS Files: metro-bootstrap.css metro-bootstrap-responsive.css

    Please help.

  • 4

    Dialogs not working in 4.3

    Hi after yesterday's update dialogs stop working, and when I try to open dialog, I only get message "Element not contain role dialog! Please add attribute data-role="dialog" to element #idDialog". There is data-role="dialog" in dialog for sure, as dialogs worked in older versions and rollback to ver. 4.2 helped as well.

  • 5

    Metro UI using Vue js

    Hello sir Can i use this framework in Vue js? the datepicker and calendar seem not working in vue js but other input is working..

     <label>Calendar Picker</label>    
                        <input type="text" data-role="calendarpicker" v-model="calendar">
      <label>Date Picker</label>    
                        <input data-role="datepicker" v-model="date"> 
  • 6

    Calendar Picker Component Bug

    Describe the bug When selecting a date it chooses 2 dates.

    To Reproduce

    Expected behavior Work as on documentation

    Screenshots image

    Desktop (please complete the following information):

    • OS: Windows
    • Browser Chrome
    • Metro Version 4.5.0
  • 7

    set Content Dialog not centered

    When I open a Dialog with setContent(), it loads onto the bottom of the screen. When i minimize and maximize the browser or change browser window width or height, the dialog centers properly.

    Dialog 1 Dialog 2

    Is there a way to redraw or refresh dialog position before opening? or is there a solution??

    Thank you

  • 8

    Button 'X' to clear an input doesnt' work, doesn't clear else submit the form

    Hi everybody, I'm using the class "input-control text" and I need a "

  • 9

    Dropdown menu in context "user-login"

    Please consider the following code:

    <div class="page-header bg-color-white" style="z-index:1000">
        <div class="page-header-content ">
            <ul class="menu">
                <li data-role="dropdown">
                    <a href="#">
                        <div class="user-login">
                            <div class="name">
                                <span class="first-name">First</span>
                                <span class="last-name">Last</span>
                            <div class="avatar">
                                <img src="/usr/watashi/avatar100.png" />
                    <ul class="dropdown-menu">
                        <li><a href="#">Logoff</a></li>

    The idea is a context menu that appears when the avatar/username is clicked, but this concept seems to not work. Any thoughts?

  • 10

    Treeview event not working metro 4

    The below code is for metro 3 and working fine. Not working in metro 4 because of backward compatibility issues. Please guide me to work with treeview in metro 4.


    Javascript, 'treeNodeToggled', 'contextItem', function (e, expanded) {

            if ( != ".node") {
                var targetNode =;
                var customerId = $(targetNode).attr('customerId');
                var customerType = $(targetNode).attr('customerType');
            else {
                var targetNode =;
                var customerId = $(targetNode).attr('customerId');
                var customerType = $(targetNode).attr('customerType');
            if (expanded) {
                if (customerType == 2) {
                    getServicesForCustomer(targetNode, customerId);
                else if (customerType == 3)
                    getClientsForCustomer(targetNode, customerId, false);
        }, null, true);
  • 11


    Очень нравятся ваши работы! Пытаюсь потестить, подскажите в чем проблема с dialog выдает вот такою ошибку Uncaught ReferenceError: addTouchEvents is not defined ...и если я правильно понимаю обработка форм и прочее можно размещать, здесь: onShow: function(_dialog){ Спасибо!

  • 12

    METRO UI Builder minify code does not work

    Describe the bug The METRO UI Builder at has switches to minify code and to include source maps. These buttons do not have an effect: The code is neither minified (I tried both switch position) nor there is a source map includes (which make sense only if the code was minified, of course)

    To Reproduce Go to and try to download minified code.

    Expected behavior Minified code ad source map in the zip-file, if the appropriate switch position has been set

  • 13

    Reflected xss in Notify.js

    FYI we have notified you many months ago, by email that there is an vuln in your code, but you did not reply nor fixed the issue. So thats why i'm posting the issue here.

    If you think this is already fixed, then see this ticket, as an open disclosure.

    Describe the bug It is possible, to run js when triggering an notification, when the notification gets the body/value of the parameter.

     if (title) {
                    t = $("<div>").addClass("notify-title").html(title);
                m = $("<div>").addClass("notify-message").html(message);

    To Reproduce if you have an parameter that triggers an notification for metro, then just put "" into the parameter value. and you should see an alert poping up.

    In our case, the problem was when searching for an url with a parameter, and the url was not found it would display the parameters content like " not found"

    How to fix We fixed it, by just replacing the ".html" to ".text" image

    Additional context Thanks for reading, if you have any questions, then feel free to ask.

  • 14

    Date format in Calendarpicker not working

    Describe the bug In the latest build, when you change the output date format from the default YYYY-mm-dd to anything else, the result is not correctly formatted.

    To Reproduce Create a input with data-role="calendarpicker", set data-format="%d %b %Y" or data-format="%d %B %Y" . Now when you pick a date from the calendar, the result is %3 %b %undefined or %2 %B %undefined. The same problem can be seen in the example here:

    Expected behavior The date should be formatted correctly using the data-format format.

    Screenshots image image

  • 15

    Calendar wrong dates displayed

    Describe the bug When loading the calendar the dates displayed in the month view are shifted incorrectly by one.

    To Reproduce Load any of the source examples for the calendars and you will see.

    Expected behavior I noticed just by checking the calendar in my computer and because it's highlighting the wrong day.

    Screenshots image

  • 16

    function show()

    Describe the bug functions show()/hide toggle between display:none and display:block Unfortunately, when hidding a table row, the function show should go back to display:table-row