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
and Bootstrap 5 for delivering boundless highly customized projects
Devs Forum
Learn more about Metronic from
Video Tutorials
Metronic 8 - Bootstrap Docs
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
coupled with the de-facto frameworks and familiar tools
Loved 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
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
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
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
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
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
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
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
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
experience by Create React App
React Router - Route Anywhere
Collection of navigational components that
compose declaratively with your React application routing
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
Youtube 
Github 
Twitter 
Instagram 
Linkedin 
Dribbble 
