Metronic Documentation

A single core framework and long term tool built on top of Tailwind CSS
and Bootstrap 5 for delivering boundless highly customized projects
Devs Forum Learn more about Metronic from Video Tutorials

Trust Driven by

11 Years of Innovations

Enterprise grade  and cut-price solution for web apps of  any size 
coupled with the de-facto frameworks and familiar tools
Trusted By
0
Rated 5 Stars
0
End Users
0
On Theme Market
0

12 Frameworks

One Scalable Foundation

A single core framework and long term tool built on top of Bootstrap 5
to ship limitless highly customized projects of any size

HTML Version

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

NPM - Package Management

Node Package Manager for quick and secure package management through command line tools

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Gulp - Task Automationn

Automate & enhance your repetitive workflows and compose them into efficient build pipelines

Webpack - Module Bundler

Static assets bundler for easy integration with popular server side frameworks

HTML5 - As Cornerstone

No design skills required, use the prepackaged solutions to code without ever leaving your HTML editor

CSS3 - Design System

Flexible CSS utility classes build on top of Bootstrap 5 will cover almost all your design needs

Sass - CSS With Superpowers

Handle CSS with Sass, the most mature, stable, and powerful professional grade CSS extension language

Datatables - Dynamic HTML Tables

Highly flexible Javascript plugin that adds advanced features to any HTML table

Fullcalendar - JavaScript Event Calendar

Powerful plugins that offers compelling event handling features with calendar and timeline views support

Vue Version

Vue 3 - Progressive JS Framework

Custom tailored Vue 3 solution with the most popular VueJS libraries
to provide solid a foundation for your next Vue apps

TypeScript - JavaScript With Syntax For Types

TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Vite - Frontend build tooling

Build tool that aims to provide a faster and leaner development experience

Pania - Store library for Vue

It allows you to share a state across components/pages

Vue I18n - Internationalization

For internationalization solution we use Vue I18n. It easily integrates
some localization features to your Vue.js Application

Vue Router - Routing Solution

Advanced single page rotuing with nested route and view
mapping, modular, component-based router solution

Vuelidate - Seamless Validation

Highly flexible form validation is powered by Vuelidate, a lightweight
model-based validation solution for Vue

Element Plus - Powerful UI Library

Vue 3 based component library for designers and developers that
provides efficient, consistent and feedback driven UI solutions

React Version

React - Building User Interfaces

Custom tailored React 18 solution with popular React libraries
to provide solid a foundation for React projects

TypeScript - JavaScript With Syntax For Types

TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

React Bootstrap - Rebuilt for React

True React components for Bootstrap without unneeded
dependencies and excellent choice for your UI foundation

CRA - Create React App

Use an integrated toolchain for the best user and developer
experience by Create React App

React Router - Route Anywhere

Collection of navigational components that
compose declaratively with your React application routing

React Query - Powerful Asynchronous State Management

Use declarative and auto-managed queries and mutations to
fetch and update data from any asynchronous source

Angular Version

Angular - Web Developer's Platform

Solid Angular 17 solution for building applicaiton
UIs fast and easy for projects of any size.

TypeScript - JavaScript With Syntax For Types

TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Angular i18n - Internationalization

We use Angular's built-in internationalization module
to provide seamless localization and translation for your Angular apps

Angular Forms - Cornerstone Of Apps

Angular's built-in form module for handling user input
with forms is the cornerstone of many common applications

Angular Material - Material Design Components

Fully integrated high quality & versatile Material Design
component for Angular apps

Angular Router - Common Routing Tasks

We use Angular's built-in router module to handle
the navigation from one view to the next

RxJS - Reactive Extensions

RxJS is a library for reactive programming using Observables, to make
it easier to compose asynchronous or callback-based code

ASP.NET Core Version

Asp.Net Core 6 - Starter Kit

Asp.Net Core 6 based starter kit app with a solid foundation for your
next project that fully utilizes the theme HTML and assets

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

NPM - Package Management

Node Package Manager for quick and secure package management through command line tools

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Gulp - Task Automationn

Automate & enhance your repetitive workflows and compose them into efficient build pipelines

Webpack - Module Bundler

Static assets bundler for easy integration with popular server side frameworks

Metronic - Full Source Code

Use any Metronic feature in your pages by just copy-pasting required HTML and assets(CSS, JS) using the Theme API

Theme API - Assets & HTML Helpers

Helper functions to manage the page's HTML construction and assets(CSS, JS) includes

Node.js Version

Node.js - Express.js 4 Starter Kit

Fast, unopinionated, minimalist web framework for Node.js
that provides a robust set of features for web and mobile applications

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

NPM - Package Management

Node Package Manager for quick and secure package management through command line tools

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Gulp - Task Automationn

Automate & enhance your repetitive workflows and compose them into efficient build pipelines

Webpack - Module Bundler

Static assets bundler for easy integration with popular server side frameworks

Metronic - Full Source Code

Use any Metronic feature in your pages by just copy-pasting required HTML and assets(CSS, JS) using the Theme API

Theme API - Assets & HTML Helpers

Helper functions to manage the page's HTML construction and assets(CSS, JS) includes

Blazor Version

Blazor - Starter Kit

Blazor Server based starter kit app with a solid foundation for your
next project that fully utilizes the theme HTML and assets

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

NPM - Package Management

Node Package Manager for quick and secure package management through command line tools

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Gulp - Task Automationn

Automate & enhance your repetitive workflows and compose them into efficient build pipelines

Webpack - Module Bundler

Static assets bundler for easy integration with popular server side frameworks

Metronic - Full Source Code

Use any Metronic feature in your pages by just copy-pasting required HTML and assets(CSS, JS) using the Theme API

Theme API - Assets & HTML Helpers

Helper functions to manage the page's HTML construction and assets(CSS, JS) includes

Spring Version

Spring - Starter Kit

Spring 2.7 based starter kit app with a solid foundation for your
next project that fully utilizes the theme HTML and assets

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

NPM - Package Management

Node Package Manager for quick and secure package management through command line tools

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Gulp - Task Automationn

Automate & enhance your repetitive workflows and compose them into efficient build pipelines

Webpack - Module Bundler

Static assets bundler for easy integration with popular server side frameworks

Metronic - Full Source Code

Use any Metronic feature in your pages by just copy-pasting required HTML and assets(CSS, JS) using the Theme API

Theme API - Assets & HTML Helpers

Helper functions to manage the page's HTML construction and assets(CSS, JS) includes

Laravel Version

Laravel - Starter Kit

Laravel 9 based starter kit app with a solid foundation for your
next Laravel project that fully utilizes the theme HTML and assets

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

NPM - Package Management

Node Package Manager for quick and secure package management through command line tools

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Gulp - Task Automationn

Automate & enhance your repetitive workflows and compose them into efficient build pipelines

Webpack Mix - Module Bundler

Static assets bundler for easy integration with popular server side frameworks

Metronic - Full Source Code

Use any Metronic feature in your pages by just copy-pasting required HTML and assets(CSS, JS) using the Theme API

Theme API - Assets & HTML Helpers

Helper functions to manage the page's HTML construction and assets(CSS, JS) includes

Blade - Views & Templates

Blade is the simple, yet powerful templating engine
that is included with Laravel

Django Version

Django - Starter Kit

Django 4 based starter kit app with a solid foundation for your
next project that fully utilizes the theme HTML and assets

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

NPM - Package Management

Node Package Manager for quick and secure package management through command line tools

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Gulp - Task Automationn

Automate & enhance your repetitive workflows and compose them into efficient build pipelines

Webpack - Module Bundler

Static assets bundler for easy integration with popular server side frameworks

Metronic - Full Source Code

Use any Metronic feature in your pages by just copy-pasting required HTML and assets(CSS, JS) using the Theme API

Theme API - Assets & HTML Helpers

Helper functions to manage the page's HTML construction and assets(CSS, JS) includes

Rails Version

Rails - Starter Kit

Ruby & Rails 7 based starter kit app with a solid foundation for your
next project that fully utilizes the theme HTML and assets

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

NPM - Package Management

Node Package Manager for quick and secure package management through command line tools

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Gulp - Task Automationn

Automate & enhance your repetitive workflows and compose them into efficient build pipelines

Webpack - Module Bundler

Static assets bundler for easy integration with popular server side frameworks

Metronic - Full Source Code

Use any Metronic feature in your pages by just copy-pasting required HTML and assets(CSS, JS) using the Theme API

Theme API - Assets & HTML Helpers

Helper functions to manage the page's HTML construction and assets(CSS, JS) includes

Flask Version

Flask - Starter Kit

Flask 2 based starter kit app with a solid foundation for your
next project that fully utilizes the theme HTML and assets

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

NPM - Package Management

Node Package Manager for quick and secure package management through command line tools

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Gulp - Task Automationn

Automate & enhance your repetitive workflows and compose them into efficient build pipelines

Webpack - Module Bundler

Static assets bundler for easy integration with popular server side frameworks

Metronic - Full Source Code

Use any Metronic feature in your pages by just copy-pasting required HTML and assets(CSS, JS) using the Theme API

Theme API - Assets & HTML Helpers

Helper functions to manage the page's HTML construction and assets(CSS, JS) includes

Symfony Version

Symfony - Starter Kit

Symfony 6 based starter kit app with a solid foundation for your
next project that fully utilizes the theme HTML and assets

Bootstrap 5 - CSS & JS Framework

Bootstrap 5 is used as a backbone by extending it further according to a unique design system

NPM - Package Management

Node Package Manager for quick and secure package management through command line tools

Yarn - Dependency Manager

Fast, safe & stable dependency manager with multithreading and version locking

Gulp - Task Automationn

Automate & enhance your repetitive workflows and compose them into efficient build pipelines

Webpack - Module Bundler

Static assets bundler for easy integration with popular server side frameworks

Metronic - Full Source Code

Use any Metronic feature in your pages by just copy-pasting required HTML and assets(CSS, JS) using the Theme API

Theme API - Assets & HTML Helpers

Helper functions to manage the page's HTML construction and assets(CSS, JS) includes

Bootstrap 5 HTML Version

Bootstrap 5 HTML Version

Bootstrap 5 HTML Version

Bootstrap 5 HTML Version

Bootstrap 5 HTML Version

Bootstrap 5 HTML Version

Bootstrap 5 HTML Version

Bootstrap 5 HTML Version

Bootstrap 5 HTML Version

“Metronic was one of the best decisions we made when we started developing ASP.NET Zero. As .NET backend developers, Metronic was so easy-to-use and streamlined our development processes whilst making it possible for us to create a good-looking, stable and user-friendly frontend. Metronic helped us to reach the market quickly, which was one of the key points of our success.
Additionally, Metronic has different UI options like Angular, Blazor, React, etc... and many components which are used by industry leader enterprise app. This also allowed us to develop our app with no need to use a component library. Another good point is, Metronic has very thorough documentation and many real-life samples. When we needed to develop a new feature, documentation and samples helped us in a great manner.“
“The impact of the Metronic 8 theme on our frontend development is overwhelming. We were skeptical at first, because we had to REWRITE the frontend due to another theme. But working with a component based approach did not deliver us a good design as well. After weeks of comparing, we opted for the Metronic theme. The main points we considered were overall design, performance, Bootstrap, Angular, React and Vue.js support.
Last but not least, you need great performance for customer satisfaction. That is why we try to load as few libraries as possible. Therefore, just depend on the Metronic 8 theme and use pure javascript to avoid using JQuery. The community and support is great, so try it yourself!“
Would you need
a Custom License ?
Get a free quote for a custom license that allows using Metronic in your project with an unlimited number of distributions.
How about
a Custom Project ?
Since 2012, we have helped startups, blue chip companies and government agencies and successfully delivered over 120 custom projects.
Prebuilts Get Help Buy Now