explaingit

olton/metroui

★ 7,077JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A self-contained front-end framework with ready-to-use UI components styled after Microsoft's flat Metro design, no external dependencies, works in all modern browsers, available via npm or NuGet.

Mindmap

mindmap
  root((Metro UI))
    What it does
      UI components
      Metro flat design
      No dependencies
    Tech Stack
      JavaScript
      CSS
      npm and NuGet
    Components
      Buttons and grids
      Dialogs and calendars
      Navigation menus
    Use Cases
      Web dashboards
      .NET projects
      Rapid prototyping
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a web app with a Windows 8-style flat tile interface using pre-built Metro UI components.

USE CASE 2

Add calendars, dialogs, tabs, and navigation menus to a .NET web project via the NuGet package.

USE CASE 3

Prototype a business dashboard with Metro-styled grids, accordions, and form elements without writing CSS from scratch.

Tech stack

JavaScriptCSSnpmNuGet

Getting it running

Difficulty · easy Time to first run · 5min
Free to use in personal and commercial projects with no restrictions, just keep the copyright notice.

In plain English

Metro UI is a front-end framework for building websites and web applications. A front-end framework is a collection of pre-written CSS styles and JavaScript components that you include in your project to get a consistent look and working interface elements without writing everything from scratch. Metro UI takes its visual style from the flat, tile-based design language Microsoft introduced with Windows 8, sometimes called the Metro design style. It includes ready-to-use components for things like buttons, grids, navigation menus, forms, dialogs, calendars, tabs, accordions, and other common interface patterns. The framework has no external dependencies, meaning you do not need to install other libraries to use it. It works in the two most recent versions of Chrome, Firefox, Edge, Safari, and Opera. The project is available as an npm package for JavaScript-based build setups and as a NuGet package for .NET projects. The documentation and a live demo are hosted at separate websites linked from the README. Releases come out roughly once a week on Sundays, covering bug fixes, new features, or new components. The project does not offer long-term support for older versions, so staying current means tracking the weekly releases. The framework is released under the MIT license, which allows free use in personal and commercial projects. A paid Support Pack is available separately on a subscription basis and provides priority email support, but it is not required to use the framework itself. The project is maintained by a single developer, Serhii Pimenov, and has been in development since 2012. A Discord server is available for community questions.

Copy-paste prompts

Prompt 1
Show me how to add Metro UI to a plain HTML file and build a responsive navigation menu with tile-style buttons.
Prompt 2
How do I use Metro UI's calendar component and listen for the date-selection event in JavaScript?
Prompt 3
I am building an ASP.NET MVC project, how do I install Metro UI via NuGet and use the grid system for page layout?
Prompt 4
How do I override Metro UI's default accent color to match my brand while keeping the flat tile design style?
Open on GitHub → Explain another repo

← olton on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.