Create your site fast and effectively with Metro UI

Metro UI is a free open-source impressive html-first components library built on html, css, javascript.
$ npm i @olton/metroui
Click to copy to clipboard
Read the docs
Click to open docs
Easy to Use
Using Metro UI is straightforward. You don't even need to know javascript to make fully functional websites that interact with the user.
View Demo
Open Source
Metro UI is an open source project. You can access to full source code on the GitHub and get Metro UI with free license.
Download Source
Simple Access
Metro UI is accessible in various ways. You can get Metro UI from NPM, CDN, or download source from GitHub.
Read Docs
What is it?
Metro UI is an open source html-first toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins.

Metro UI developed to build websites in Windows Metro Style and include general styles, grid, layouts, typography, 100+ components and routines, 500+ built-in icons.

Metro UI licensed under MIT license.

Metro UI usage examples

In the links below you can see examples of using Metro UI when creating sites.

Pandora—free big example

Pandora - is a Responsive and Clean Admin Dashboard template. This template created with Metro UI with uses native classes, elements, and components. The template contains different types of reusable and professional responsive components with different variations.
View In Action Get Source

You can use CDN

You can use CDN to include Metro UI into you page: 

                        <!DOCTYPE html>
                        <html lang="en">
                          <head>
                            <!-- Required meta tags -->
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width,
                                initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

                              <!-- Metro UI -->
                            <link rel="stylesheet" href="https://cdn.metroui.org.ua/current/metro.css">
                            <link rel="stylesheet" href="https://cdn.metroui.org.ua/current/icons.css">
                          </head>
                          <body>
                            <h1>Hello, world!</h1>

                            <!-- Metro UI -->
                            <script src="https://cdn.metroui.org.ua/current/metro.js"></script>
                          </body>
                        </html>

or

Build your one

Use any bundler to create your own set of Metro UI components
esbuild
Parcel
Rollup
Vite
Webpack
 

                            import "@olton/metroui/source/core"
                            import "@olton/metroui/source/common/common-css"
                            import "@olton/metroui/source/colors"
                            import "@olton/metroui/source/components/accordion"
                            import "@olton/metroui/source/icons"
                        

                            <div data-role="accordion">...</div>
                            <span class="mif-rocket">...</span>

                            <script src="index.js" type="module"></script>
You can see more examples of using different bundlers here. 

                            npm i --save-dev vite less
                        

                            {
                              "scripts": {
                                "start": "vite",
                                "build": "vite build"
                              }
                            }
                        

                            npm run build

Technical Partners