Metro UI Alternatives for Windows-Style and Flat Web UIs

Metro UI is a free front-end framework, maintained under the olton account on GitHub, that borrows the flat tiles and bold color of Microsoft's old Metro design language. The homepage lists 150+ components and 900+ icons, with the code under MIT and the docs under CC BY 3.0. Version 5 lives on npm as @olton/metroui.

The project is quieter than it looks. The README says new versions usually ship "one week on Sundays", yet npm shows no release after 5.1.20 on October 19, 2025. The same README says "long-term support of older versions of Metro UI doesn't currently exist", and npm now flags the old metro4 and metro4-dist packages as no longer supported. If you are starting fresh or stuck on v4, the six picks below are better maintained.

Prices below are as of November 6, 2026. Our method is on How we review tools.

Quick comparison

Fluent UI Web Components

Metro was Microsoft's design language a decade ago. Fluent 2 is the current one, and Fluent UI Web Components is its framework-free build. The developer page says it "is built on FAST Element and Typescript, and distributed as JavaScript Modules", with styling through CSS variable tokens.

The 3.x line went stable on June 29, 2026 after a long beta and release-candidate run. The latest tag on npm is 3.1.4, published on November 4, 2026. You load it as custom elements, so it fits a plain HTML page, a server-rendered app or a Vue or Svelte project.

Best for: Sites and internal tools that should follow Microsoft's current design, without picking a JavaScript framework.

Pricing:

• Free, MIT licence

Watch out for:

• It ships components, not a page system. Metro UI's grid, tiles and utility classes have no counterpart, so layout is your own CSS.
• Version 3 needs @microsoft/fast-element ^3.0.0 as a separate peer dependency on npm. It is also young: the first stable 3.x release is barely four months old.

Official site: Fluent UI Web Components.

Fluent UI React

The React build of Fluent is the older and larger of the two web libraries. Its suite package, @fluentui/react-components, is at 9.75.1 from November 2, 2026, and nightly builds appear daily. It is MIT-licensed.

It reached version 9 through a long alpha, beta and release-candidate run in 2021 and 2022, and has stayed on that major since, so upgrades are minor-version bumps. The peer range covers React from 16.14 up to, but not including, 20.

Best for: React teams building internal tools that should look like Microsoft software.

Pricing:

• Free, MIT licence

Watch out for:

• It only works in React. A Metro UI site written as jQuery-style HTML with data attributes needs a rewrite into components.
• The Metro tile look does not come with it. Fluent 2 is a different design language, so a product branded around Metro tiles will look different after the move.

Official site: Fluent UI React.

Tabler

Many Metro UI projects are admin panels, and Tabler is built for that job. It is a free HTML dashboard kit on top of Bootstrap 5, with 100+ components and 6,257 icons according to its homepage. Cards, stat tiles, charts and data tables come styled and ready, which covers most of what people used Metro tiles for.

Releases are frequent. Version 1.7.3 was published on October 29, 2026, the fourth release that month on npm.

Best for: Back-office dashboards that need tiles, charts and tables ready on day one.

Pricing:

• Open source edition: free, MIT
• Pro: $29, precompiled package with email support and updates
• All Package: $69 one-time, adds 139 illustrations and 80 email templates
• 14-day money-back guarantee

Watch out for:

• Tabler inherits Bootstrap 5's classes, so the coming Bootstrap 6 rename of responsive classes will reach it too.
• The date picker is a separate peer dependency. Version 1.7.3 lists vanilla-calendar-pro as a peer on npm, so it is not bundled the way Metro UI's calendar is.

Official site: Tabler.

UIkit

UIkit is the closest structural match to Metro UI: one CSS file, one JavaScript file, no jQuery, and a long component list. YOOtheme's site lists 81 components with Less and Sass sources. Unlike Metro UI, it actually ships often. Version 3.25.29 reached npm on November 2, 2026, with no runtime dependencies.

Its default style is flat and spare, which is closer to Metro than Bootstrap's look. More options are on our UIkit alternatives page.

Best for: Metro UI users who want the same all-in-one CSS and JS bundle from a team that still releases often.

Pricing:

• Free, MIT licence
• YOOtheme Pro site builder from the same team: from €129 a year for 3 sites

Watch out for:

• The repo has 575 open issues against 18.5k stars, so bugs can sit for a while.

Official site: UIkit.

Bootstrap

When nobody on the team wants to learn another framework, Bootstrap is the practical answer. The stable 5.3.8 release from August 2025 has a grid, utilities and JavaScript components, and needs only Popper as a peer, per npm.

The 6.0.0 alpha from October 8, 2026 adds CSS layers and a Dialog component on the native <dialog> element, and moves JavaScript to ES modules only.

Best for: Teams that want the widest pool of themes, snippets and developers who already know the classes.

Pricing:

• Free, MIT licence

Watch out for:

• v6 drops the UMD bundle and the window.bootstrap global, so inline scripts that call Bootstrap from a script tag will break on upgrade.
• Out of the box it looks like Bootstrap, with rounded corners and blue buttons. Getting a flat Metro look takes your own Sass work.

Official site: Bootstrap. Our listing: Bootstrap.

Tailwind CSS

Metro's look is mostly square blocks, strong color and big type, and Tailwind's utilities make that easy to build without fighting a theme. A tile wall is a CSS grid with a few spans. The current release is 4.3.5 from November 6, 2026, per npm.

Version 4 targets modern browsers only. The compatibility page lists Chrome 111, Safari 16.4 and Firefox 128, and says it is not designed for Sass, Less or Stylus.

Best for: Designers who want a custom flat tile interface rather than someone else's component style.

Pricing:

• Framework: free, MIT
• Tailwind Plus templates: paid, but the page redirected to a sign-in, so no public price was readable on November 6, 2026

Watch out for:

• There are no components or JavaScript. Metro UI's dialogs, pickers and notifications all have to come from elsewhere.
• The company is small now. DevClass reported in January 2026 that Tailwind Labs laid off three of its four engineers.

Official site: Tailwind CSS. Our listing: Tailwind CSS.

How to choose

When to stay with Metro UI

Stay on Metro UI 5 if your app depends on its specific widgets and it works today. The code is MIT, the repo shows only 7 open issues, and nothing forces a move. Pin 5.1.20, watch the repo for activity, and plan an exit if another year passes without a release.

Frequently asked questions