Metro UI CSS (also branded as Metro UI) is an open-source, MIT-licensed front-end framework for building responsive, mobile-first web applications with Metro-style components, maintained by Serhii Pimenov since 2012. It distributes as a CSS, JavaScript, and icon library with no runtime dependencies and no jQuery requirement, plus an optional reactive data model for data-bound components.
What is Metro UI CSS?
Metro UI CSS is a progressive front-end framework that turns plain HTML into a Metro-styled interface by loading metro.css, metro.js, and icons.css from its lib folder. It accepts standard HTML5 markup and produces styled components such as tiles, forms, dialogs, and navigation using CSS classes and JavaScript widgets. The framework runs entirely in the browser, works with any server-side stack, and is built with the LESS preprocessor. The project is developed by Serhii Pimenov and is available on GitHub with over 7,000 stars, as well as through NPM and NuGet.
Key Features
- No dependencies — Metro UI CSS is dependency-free and does not require jQuery, so it can be dropped into any page without conflicting with existing libraries.
- Reactive data model — Includes a reactive data model for building data-bound components that update when underlying data changes.
- Metro-style component library — Provides a component library in Metro Style, intended as a Bootstrap replacement, with CSS classes and JavaScript widgets.
- LESS preprocessor styles — Styles are authored in LESS and compiled into the published
metro.css, allowing developers to customize via LESS. - Icon set — Ships
icons.csswith a built-in icon collection sized separately from the main stylesheet. - Easy distribution — Available via NPM package
@olton/metroui, NuGet packagemetroui, and direct download from GitHub. - Regular releases — New versions are released roughly every week on Sundays when there are significant bug fixes, new APIs, or components.
- Browser compatibility — Supports the latest two versions of Chrome, Firefox, Edge, Safari, and Opera.
Who is it for?
- Front-end developers — Build responsive web application UIs with ready-made Metro-style components without writing custom CSS from scratch.
- Bootstrap users looking for a switch — Developers who want a Bootstrap-like workflow with a different visual language (Metro tiles and flat design) and no jQuery dependency.
- Prototypers and product teams — Quickly assemble functional HTML prototypes for dashboards and admin panels using the included widgets and reactive data model.
- Open-source adopters — Teams that need an MIT-licensed UI kit with no dependency lock-in and easy self-hosting via a single CSS and JS file.
Use cases
- Bootstrap migrants: Swap the Bootstrap stylesheet for
metro.cssand rebuild existing responsive layouts with Metro's tile and component classes. - Dashboard developers: Use the reactive data model to bind tables, lists, and metrics to changing JSON data without manual DOM updates.
- Prototypers: Combine the icon font and prebuilt widgets to create clickable admin-panel and web-application prototypes in an afternoon.
Pricing
Metro UI CSS itself is free under the MIT license. In addition, the project offers a paid SUPPORT PACK, available as an annual subscription through Korzh.com, which adds extra time for priority email support and other options.
Alternatives
- Bootstrap — the dominant CSS framework that Metro UI CSS explicitly positions itself against as a replacement.
FAQ
Is Metro UI CSS free?
Yes, Metro UI CSS is released under the MIT license, so the framework is free to use in commercial and personal projects. The optional SUPPORT PACK from Korzh.com is a paid annual subscription that provides priority support and other extras.
Does Metro UI CSS require jQuery?
No. The project lists no-jquery-required as a topic and has no runtime dependencies, so it works without jQuery or any other JavaScript library.
Which browsers are supported?
Metro UI CSS supports the latest two versions of Chrome, Firefox, Edge, Safari, and Opera. Older browser versions are not targeted, and there is currently no long-term support (LTS) for previous Metro UI CSS versions.
How often does Metro UI CSS release new versions?
Releases are created about once a week on Sundays, whenever there are significant bug fixes, new APIs, or new components. If your current version works, you can keep using it, but long-term support for older versions is not offered.
What is the SUPPORT PACK?
The SUPPORT PACK is an optional paid subscription available at Korzh.com that adds extra time for priority email support and other options on top of the MIT-licensed framework.
