Build fast, responsive sites
with Metro UI

Metro UI is a progressive front-end framework for creating high-performance responsive reactive web applications!

Main Features

Metro UI is a free and open-source library for building responsive, reactive, mobile-first web applications with a modern interface.

Metro UI includes general styles, responsive grid, layouts, typography, 150+ components, 900+ built-in icons, Router, reactive DataModel, classes and functions to work with DOM, dates, colors, strings, Hooks (as in React), and data validation library. Are you making multilingual apps? Metro UI includes a special module for i18n support.

Metro UI має детальну документацію по кожному компоненту бібліотеці, багато прикладів та активну спільноту, що робить його чудовим вибором для розробників будь-якого рівня.

Let's Go

Html-first

You don't even need to know JavaScript to make fully functional websites that interact with the user.

Declarativity

Всі параметри компонентів можуть бути задані декларативно за допомогою data-* атрибутів

Flexibility

Metro UI provides a wide range of components and tools for creating modern web interfaces.

Adaptability

All components are responsive and optimized for different devices.

Reactivity

Use built-in class Model to create reactive applications.

Performance

The library is optimized for fast operation and minimal resource consumption.

Customization

Easily customizable for project needs through CSS variables and themes.

Dark & Light

All components support dark and light modes. You can switch modes manually or automatically.

Need comfortable testing?

Latte Test System - is a powerful testing framework for JavaScript, TypeScript, HTML, and React from Metro UI author.

Get Latte

Common CSS

Common JS

Special Libs

Web Components

Icons

New Ideas...

Library Structure

Metro UI offers the developer: common styles and useful javascript functions, 9 specialized modules, and 150+ ready to use components.

Metro UI contains the Dom module for interacting with the DOM, modules for working with dates, strings, color and more...

All parts are written by the same author, so Metro UI has zero-dependency.

The library is constantly developing, so you should expect new opportunities!

Download Metro UI

Ready to use components!

built-in specialized libraries

Tightly selected icons for any needs

Any Started

Jump right into building with Metro UI — use the CDN, install it via package manager, or download the source code.

CDN

NPM

Nuget

GitHub

Want to get started quickly?

Use pre-compiled Metro UI with CDN. It is enough to add styles and javaScript part by several teams to your page. CDN for Metro UI is provided by KeyCDN.

KeyCDN is a high performance content delivery network that has been built for the future. It only takes a few minutes to start delivering content to your users at a blazing fast speed.

Developing on Visual Studio?

Use a special Metro UI package for Nuget.

Nuget is a package manager for .NET. It allows developers to create and use .NET useful libraries, as well as provide common access to them.

We creating package for each Metro UI version.

Get Metro UI

Use the package manager?

Install Metro UI with a command:

...And then create your own awesome set of Metro UI components with your favorite bundler:

Esbuild

Parsel

Rollup

Vite

Webpack

To make it easier to understand how to use Metro UI with any bundlers, I created a special demo repository on GitHub, which provides examples of using different bundlers to build your own Metro UI assembly.

View Demo Repository

Components

Metro UI includes 150+ ready-to-use awesome web components. The components are designed in such a way that even without knowing JavaScript, you can create interactive, high-performance web applications that will impress with their functionality.

HTML-First

Optimized for Performance

Dark & Light Themes

Mobile First & Responsive

For any purpose

Metro UI components are versatile building blocks for any web project. From simple websites to complex web applications, you'll find components for navigation, data display, forms, dialogs, notifications, and more. Each component is customizable and can be easily integrated into your existing workflow.

Common CSS

Essential CSS utilities and helpers including typography, colors, borders, effects, positioning, and layout classes for consistent styling and rapid development.

Common JS

Essential JavaScript utilities and helpers including DOM manipulation, event handling, AJAX requests, animations, and utilities for enhanced interactivity and dynamic functionality.

Grid system

Flexible and responsive grid system built on CSS Flexbox, offering easy layout control with rows and cells for seamless content organization across different screen sizes.

Navigation

Powerful navigation components including app bars, hamburger menus, side panels, and tabs for seamless user experience and intuitive interface organization.

Information

Comprehensive data visualization and information display components including dialogs, notifications, tables, lists, cards, and charts for effective presentation of your data and content.

Widgets

Interactive and versatile widget components including calendars, timers, gauges, streamers, chat, wizards, progress and activities, etc...

Forms

Comprehensive form components with built-in validation, including input fields, selectors, switches, and custom controls for seamless user input and data collection.

UI Elements

Essential UI components including buttons, badges, cards, tiles, splitters, accordions, treeview, listview, dialogs, and tooltips for creating engaging and interactive user interfaces with consistent design patterns.

Specialized libraries

Metro UI provides a collection of specialized libraries for specific functionality. Each library is focused on a particular aspect of web development, from DOM manipulation to color management. These libraries can be used independently or together to enhance your web applications with powerful, optimized features.

Dom

Work with DOM.

Datetime

Work with date and time.

String

Work with strings.

Farbe

Work with color.

Guardian

Validate user input.

Model

Reactive DataModel.

Router

Simple Router for SPA.

Html

HTML-in-JS.

Hooks

Hooks as in React.

View Demo

i18n

Metro UI provides comprehensive internationalization (i18n) support, allowing you to create multilingual web applications with ease.

The framework includes built-in localization capabilities for all components who need it (calendar, date picker, wizards, ...).

The i18n system in Metro UI is designed to be flexible and developer-friendly. It uses a simple JSON-based translation structure.

Using the Metro UI Internationalization System, you will lightly create a multi-pagan application in which the language switches without restarting the page.

CSS Style

Each Metro UI component is created using modern CSS standards, which provides adaptability and flexibility in design.

We are widely used by CSS variables to determine the visual style of the components. Each component has its own CSS variables that characterize its appearance.

All components directly from the box support the dark and light themes!

Всі CSS змінні для світлої теми зазначаються в секції :root

. Для темної теми змінні мають визначатися в CSS класі .dark-side.

Icons

Metro Icons is an open source SVG icon library (packed in font file) featuring over 900+ glyphs. Use them as icon font options give you vector scaling and easy customization via CSS.

You can include icons in your project either using a CDN or using your favorite bundler.

All icons are carefully selected in such a way as to cover most of the developers' needs.

View Icons

Technical Partners

Awesome CDN

Awesome IDE

Awesome Hosting