Metro UI is a free, open source, html-first toolkit for developing web sites with HTML, CSS, and JS.
With Metro UI, you can easily and quickly make a reactive site from prototype to production.
Metro UI includes general styles, responsive grid, layouts, typography, 100+ components and javascript routines, 800+ built-in icons,
and also router for SPA and special data model for creating a reactive web application with two-way data binding.
Main <Features>
Html-First
Using Metro UI is straightforward. You don't even need to know javascript to make fully functional websites that interact with the user.
Reactivity
Metro UI includes several JS libs to work with any aspects,
and, most importantly, special data model for creating a reactive web application with two-way data binding.
Dark & Light
Support dark-light switching out of the box, including the relevant components.
Good Docs
Metro UI has detailed documentation and good examples. Requests an additional example.
Started <Any>
Jump right into building with Metro UI — use the CDN, install it via package manager, or download the source code.
AI <Assistant>
Welcome to AI Assistant!
Start Bot
In alpha test started Telegram Bot Metro UI Assistant This bot is designed to answer questions about Metro UI and Latte. It bases its answers on the current version of the documentation. To help the bot understand the context of your question, use the keywords Metro UI and Latte.
For example:
I need help with Metro UI. Tell me about the audio-button component.
The bot and documentation are in alpha testing, so please excuse any inaccuracies and inconsistencies.
The bot runs on the DeepSeek-Chat3:free model and uses MCP Context7 to search through the documentation.
Build <With>
Use any bundler to create your own set of Metro UI components.
esbuild
Parcel
Rollup
Vite
Webpack
Create your own awesome set of Metro UI components with your favorite bundler. You can see examples of using different bundlers in this repository.
Lib <Struct>
Metro UI offers the developer: common styles and useful javascript functions, 9 specialized modules, and 100+ 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.
Metro UI consists of five parts:
1
Common CSS
contains styles for: display, flex, border, cursor, floating, sizing and positioning, typography, and base themes colors
2
Common JS
contains a lot of usefulness functions, such as an extended list of type and condition checking functions, css functions, and more other
3
Libraries
libraries for work with datetime, str (for string), farbe (for color), html, animation routines
4
Components
more than 100 components for almost all cases: inputs, cards, menus, and others
5
Icons
Metro Icons Font includes 800+ useful icons for your application
CSS <Vars>
Metro UI is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities.
:root
Metro UI provide dozens of variables for colors, font styles, and more at a :root level for use anywhere.
Variables are divided into global and component variables.
Variables names start with the component name and are followed by the name of the property.
:root {
--body-background: #ffffff;
--body-color: #191919;
--border-color: #e8e8e8;
--link-color: #5a87cb;
--link-color-hover: #0056B3FF;
}
:dark-side
All Metro UI components support dark ↔ light mode.
In Metro UI light mode is default.
For dark mode you can define variables inside a .dark-side class.
To switch to dark mode you must add class .dark-side to html tag. Also you can use special components that switch mode.
.dark-side {
--body-background: #1e1f22;
--body-color: #dbdfe7;
--border-color: #4a4d51;
--link-color: #5a87cb;
--link-color-hover: #0056B3FF;
}
You can override css variables not only in the :root.
If you only need to change one or more components on a page or component(s) in specified area, add your own class to the component (area) and define variables inside that class.
More information you can get from documentation.
Stack <Libs>
Metro UI includes special js modules to work with date and time, strings, colors, html, animations, and hooks.
These modules were designed specifically to achieve the goals when creating Metro UI, so they should also help you achieve your goals.
1
Datetime
Class and fabric function to work with date and time: parsing, formatting, converting, calculating, ...
2
Str
Class and fabric function to work with string: counting, transforming, checking, matching...
3
Farbe
Class and fabric function to work with colors: parsing, transforming, checking, matching...
If you're missing something, tell me, and maybe it will appear in the Metro UI.
Join the Discussion!
Metro UI <Action>
Maybe your site will be next?...
Code <Test>
🥛 Latte
We use Latte to test our code. Latte is a powerful testing framework (from Metro UI author) that allows you to write tests for your applications with ease.
It supports testing for: JavaScript, TypeScript, HTML elements (DOM enabled), React Components, and entire web pages with built-in headless browser.
Metro <Icons>
Metro Icons is an open source SVG icon library featuring over 800+ 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.
You can view all icons on this site.
Technical Partners
Thank you for tech support