# olton/metroui **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/olton-metroui).** 7,077 stars · 1,926 forks · JavaScript · MIT ## Links - GitHub: https://github.com/olton/metroui - Homepage: https://metroui.org.ua/ - awesome-repositories: https://awesome-repositories.com/repository/olton-metroui.md ## Topics `bootstrap` `bootstrap-replacement` `component-library` `components` `css` `css-framework` `css-frameworks` `html` `html5` `javascript` `less` `metro` `metro-style` `metro-ui` `metro-ui-css` `no-dependencies` `no-jquery-required` `reactive` `reactive-data-model` ## Description Metro UI is a progressive front-end framework for building reactive single-page applications with a Metro-style design language. It provides a component-based UI library with over 150 prebuilt interface elements, a reactive state model that automatically updates the DOM when application data changes, and a responsive grid layout system for mobile-first web development. The framework uses an HTML-first approach where interactive interfaces are assembled by adding custom HTML attributes to elements, eliminating the need for manual JavaScript glue code. It includes a hash-based SPA router for navigating between views without full page reloads, and a CSS variable theming engine that enables instant switching between dark and light color schemes across all components. Over 800 vector icons are delivered as a dedicated icon font, allowing scalable, colorable glyphs to be used in buttons, menus, and other interface elements. The responsive grid system adapts page layouts to different screen sizes using media queries and breakpoints, supporting mobile-first responsive design without JavaScript. ## Tags ### Web Development - [Web Application Development](https://awesome-repositories.com/f/web-development/web-application-development.md) — Builds mobile-first web applications with a Metro-style design language and automatic screen-size adaptation. - [Hash-Based Routing](https://awesome-repositories.com/f/web-development/hash-based-routing.md) — Handles navigation by listening to URL hash changes and swapping content regions for single-page application behavior. - [Reactive State Management](https://awesome-repositories.com/f/web-development/reactive-state-management.md) — Updates the page reactively when data changes using a built-in model with hooks and reactivity. ([source](https://v5.metroui.org.ua/overview)) - [HTML-First Reactive Frameworks](https://awesome-repositories.com/f/web-development/responsive-front-end-frameworks/html-first-reactive-frameworks.md) — Provides an HTML-first framework for building reactive single-page applications with declarative attributes. - [Single-Page Applications](https://awesome-repositories.com/f/web-development/single-page-applications.md) — Navigates between views by handling URL changes and swapping content without full page reloads. - [UI Component Libraries](https://awesome-repositories.com/f/web-development/ui-component-libraries.md) — Ships over 150 ready-to-use interface elements such as buttons, forms, and dialogs for rapid application development. ([source](https://v5.metroui.org.ua/)) - [Metro-Style Design Systems](https://awesome-repositories.com/f/web-development/ui-frameworks/metro-style-design-systems.md) — Implements the Metro visual language for creating modern, tile-based web interfaces. - [Responsive Web Frameworks](https://awesome-repositories.com/f/web-development/backend-development/web-frameworks/rendering-and-layout-architectures/responsive-web-frameworks.md) — Creates high-performance, mobile-first web applications using a progressive front-end framework with Metro-style design. ([source](https://v5.metroui.org.ua/)) ### Part of an Awesome List - [Reactive Web Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/reactive-web-frameworks.md) — Updates the DOM automatically when application state changes using a built-in reactive model and hooks. - [Icon Fonts](https://awesome-repositories.com/f/awesome-lists/media/icon-fonts.md) — Adds over 800 vector icons to an application through a dedicated icon font for easy implementation. ([source](https://v5.metroui.org.ua/)) ### Software Engineering & Architecture - [Reactive Component Models](https://awesome-repositories.com/f/software-engineering-architecture/reactive-component-models.md) — Stores application data in a reactive model that automatically triggers DOM updates when values change. ### User Interface & Experience - [Component-Based UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries/component-based-ui-libraries.md) — Offers over 150 prebuilt interface elements like buttons, forms, and dialogs for rapid application development. - [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Switches visual themes at runtime by overriding CSS custom properties, enabling instant dark-light mode toggling. - [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/custom-widget-frameworks/extensible-widget-toolkits/ui-component-libraries.md) — Ships over 150 prebuilt UI widgets following a consistent Metro-style visual language for rapid interface assembly. - [Declarative UI Interactivity](https://awesome-repositories.com/f/user-interface-experience/declarative-ui-interactivity.md) — Enables building interactive UI components by adding simple HTML attributes, eliminating the need for JavaScript glue code. ([source](https://v5.metroui.org.ua/overview)) - [HTML Attribute Bindings](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/data-binding-syntax/html-attribute-bindings/html-attribute-bindings.md) — Wires UI components to data and behavior through custom HTML attributes, eliminating imperative JavaScript glue code. - [In-Page Navigation Tools](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies/breadcrumb-navigations/in-page-navigation-tools.md) — Provides hash-based client-side routing for navigating between views without full page reloads. ([source](https://v5.metroui.org.ua/overview)) - [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Adapts page layouts to screen size through a CSS grid framework with breakpoints for mobile-first responsive design. ([source](https://v5.metroui.org.ua/overview)) - [Light and Dark Theme Implementations](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming/light-and-dark-theme-implementations.md) — Toggles between dark and light color schemes across all components without custom configuration. ([source](https://v5.metroui.org.ua/)) - [Icon Fonts](https://awesome-repositories.com/f/user-interface-experience/icon-fonts.md) — Ships over 800 vector icons as a dedicated icon font for use in buttons, menus, and other UI elements. - [Responsive Grid Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-systems.md) — Provides a responsive grid layout system that adapts page structures to different screen sizes using media queries. - [Vector Icons](https://awesome-repositories.com/f/user-interface-experience/vector-icons.md) — Renders over 800 built-in vector icons from a dedicated icon font for use in buttons and menus. ([source](https://v5.metroui.org.ua/overview)) - [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization.md) — Allows overriding CSS variables to change colors, sizes, and styles across the entire interface for custom themes. ([source](https://v5.metroui.org.ua/overview)) ### Graphics & Multimedia - [Icon Fonts](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/icon-fonts.md) — Delivers over 800 vector icons as a single icon font file for scalable, colorable glyphs in UI elements.