Cover image for Tired of Bootstrap? Try Metrojs.

Tired of Bootstrap? Try Metrojs.

manishfoodtechs profile image manish srivastava Updated on ・2 min read

I personally like metrojs. Wonderfully crafted in Ukraine.

So what is it?

Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page.

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.

Quick start
Looking to quickly add Metro 4 to your project? Use Metro CDN, provided for free by the folks at KeyCDN.

<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4.3.2/css/metro-all.min.css">

Some Examples:

Official examples visit here

A desktop UI : Yes a desktop UI by Metrojs

Alt Text

  • A Datatable UI: Supereasy by Metro:*

Alt Text

  • Admin Panel: in just an hour* :)

Alt Text

Here is Github Resporitory:

GitHub logo olton / Metro-UI-CSS

Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style and not only.

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


GitHub release GitHub release


License: MIT GitHub issues GitHub code size in bytes


Donations on Patreon Donations on Open Collective


Join the chat at https://discord.gg/NydRab3 Join the chat at https://gitter.im/metro4/Lobby Join the forum at https://forum.metroui.org.ua


Documentation and Demo: metroui.org.ua


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…

Please also check my previous posts regarding creating your cloud service like digital ocean or google cloud. Part 1 and Part-2 and Part-3 . Also most important listening your VMs on external IPs here -4

In Part-3 we have also seen how to install opennebula. Opennebula is an alternative to openstack/ cloudstack.

I hope you people like the above article and learned something.

You are most welcome to join my team form for joining .

Contact email: Manishfoodtechs@gmail.com.

If you have any problem, our team is also engaged in professional consultancy and delivery.

Don't forget to Follow, like or tag me :).

Posted on by:

manishfoodtechs profile

manish srivastava


Director & CEO, GDP CHURN (P) Ltd. Loves coding . Supports open source by funding.


Editor guide

Hm okay, your website won't look identical to hundreds or thousands of other Bootstrap sites (well it's not that hard to customize in order to make it look different), but it will look exactly like any Microsoft Metro UI site or app? Back to square one.

It may be a great choice, I just wondered in which cases you'd want to use this library instead of the official Microsoft toolkit, I mean this:


Just wondering what the difference is.


Firstly - it’s not plagiarism! all code is written by me from scratch using the Microsoft dev guide. Secondly, all the code is available as open source on github, so it won’t go anywhere. Thirdly, 6.5k stars say that someone needs this and I am grateful to those who use my Metro 4 library. And in the fourth, I myself and the company in which I work use this library for projects, therefore it is constantly developing and will develop!


Hey Sergey , How are you!
Metrojs is wonderful and my team also use it. On 24 December 2019, I had introduced metrojs to devto community in one of my article. The metrojs was viewed by 21,828 developers and 176 stars to the article.
I am one of your followers at Github . People who want to follow Sergey can visit github.com/olton . Also, link to his website: pimenov.com.ua/


But I didn't mention plagiarism, it didn't cross my mind ... 6.5K stars that's fantastic and it shows that people like and use it, power to you. Bootstrap is also great, and Material Design, and others. There's plenty of room for alternatives so more choice, power to the people.

Yes leob, Metrojs is a fantastic project. Give it a try :)

I might, checked the website and it looks great. And I've clarified my original post a bit and made it somewhat more neutral and less subjective.

But, my question remains (this is in fact what triggered my original comment): how should I see this library in relationship to the official Microsoft "Metro" standard - is it "inspired by", or is it an official and hundred percent faithful implementation, or what?

I know about "Metro" from Microsoft but when I visit the Metro UI website I don't even see a reference to Microsoft's standard, so this left me highly confused.

So I think i would be good to provide just a bit more context or background on the website as to how this relates to "Microsoft Metro", this will also help people to understand what the "use case" of the library is.

This is not an official library from Microsoft. This is completely my vision of what has been written in the Microsoft Dev Guide since 2012. The development of the library was agreed with Microsoft and the project even received the status of Microsoft Bizspark Startup. At the same time, a Microsoft representative said that I didn’t need to somehow indicate a reference to Microsoft or Microsoft Windows. Over time, I wrote those components that were no longer in the Dev guide, but I needed in the same style. That's how it all grew, starting in May 2012.

Hey leob... I found this ...


Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons. Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.

Good to know about the history, and that the project even received endorsement from Microsoft. I think that might be a relevant piece of background information also for prospective users of the library, and would be good to mention on the website, also to prevent confusion.


Guys, I dont know about you, but for me, almost I prefer write my css for my own!
I know its boring or slowly for companies or what ever, but write by my self makes the look better. Just my sharing my opinion.


Great to see an alternative, tho I believe atomic approaches and low-level utilities like Tailwind will get the most traction in future ;)



If I visited a website, and it looked like a Windows Metro desktop, I'd hit that back button so quick.

And it's not super functional either. I tried the "Desktop" demo, and when I tried to drag a "window", it wouldn't stop dragging.


if your need to create your own set of Metro 4 components in minutes - use special builder.
Metro 4 Builder - builder.metroui.org.ua


The short history of the Metro UI CSS
m.habr.com/ru/post/431152/ (russian language)


Nice Sergey !
English Translation is here: