Open-source by Keenthemes!Support our KtUI and ReUI open-source projects and help with growth.
Star on Github

Metronic 9 with Tailwind CSS Released!


We are thrilled to release a year of hard work for Metronic 9 with Tailwind CSS! As Tailwind CSS becomes the de facto UI framework for modern sites, Metronic 9 aligns with this trend right on time.

What's New:


  • Complete Figma Files: Every single page, component, and block come with comprehensive Figma design files.
  • Advanced Theming: Tailwind CSS is tailored to fit Metronic's unique design system with advanced style settings.
  • Extensive CSS Components: Over 20 custom classes for components like buttons, badges, inputs, and more.
  • Interactive JavaScript Components: More than 20 interactive elements, including datatables, modals, tabs, drawers, tooltips, dropdowns, menus, and more.
  • Business-Ready Pages: Over 100 ready-to-use business pages, CRUDs, and forms.
  • In-Depth Documentation: Detailed examples, code previews, and API guides to help you get the most out of Metronic.
  • Metronic Composer Tool: Enhance your development routine with our tool specifically designed for Metronic Tailwind-based projects.


What's Next:


  • New JavaScript Components: Upcoming advanced components like advanced select, tagify, datepicker, calendar, and snackbar to make Metronic 9 enterprise-ready.
  • New Demos: Unique styles and layouts for real-world app concepts.
  • New Pages, Apps, and CRUD Solutions: Continuously expanding our collection.
  • Ongoing Documentation Improvements: Covering more backend and frontend framework integrations.
  • Native React and Next.js Versions: Fully utilizing the design and features of the default HTML version for developing modern web apps in the shortest amount of time and at the lowest costs.
  • And Much More: Aiming to make Metronic your one-stop, long-term foundation for modern web apps.


Experience Metronic 9 in Action:


Explore the Live Preview to see Metronic 9 in action and dive into the details with our comprehensive Online Documentation.

Metronic 8.x:


We will continue to support Metronic 8.x for Bootstrap as part of the main package, including third-party plugin updates, bug fixes, and improvements.

Thank you for your continued support. We can't wait for you to experience the new Metronic 9 with Tailwind CSS!

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (67)

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(