Metronic 9 + Tailwind CSS: A New Chapter Begins
We are thrilled to announce the culmination of a year's work: the all-new Metronic 9, now with complete Tailwind CSS support and a comprehensive redesign in line with the latest UI/UX trends. This marks the beginning of an exciting new chapter for Metronic, and we have some truly amazing features lined up to follow this initial release.
Our goal for Metronic 9 is to provide ready-to-use pages, apps, and blocks for real-world applications, using no less than 95% in-house baked JavaScript/TypeScript components, and offering Figma files for every single element. Preview all the new features of Metronic 8 in Live Preview.
What is Tailwind CSS?
Tailwind CSS is a highly customizable, utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML. Tailwind allows developers to rapidly create modern, responsive layouts with ease. Learn more about Tailwind CSS.
What is Metronic?
Metronic is a leading HTML and JavaScript-based toolkit designed for building modern and scalable web applications at a ridiculously low cost. For more details, visit Product Page.
Why Use Metronic + Tailwind CSS?
Combining Metronic with Tailwind CSS offers a powerful solution for web developers. Our integrated approach ensures seamless design and functionality, enabling developers to launch their products quickly and cost-effectively. Enjoy the benefits of a comprehensive toolkit that streamlines development processes and enhances productivity.
Approach
Metronic adds custom components with its own classes, such as input, select, button, badge, progress, etc., making your HTML compact and easy to maintain.
Dark Mode
Metronic uses light/dark mode color mapping with perfectly chosen CSS variables, automatically supporting dark mode without requiring additional classes for dark mode. For more details, visit Dark Mode Guide.
Figma
Our design system in Figma provides a 100% match UI for every single component and page. Everything is perfectly crafted based on Figma components.
JavaScript
The Metronic Tailwind CSS-based HTML and JavaScript Toolkit that provides a comprehensive suite of robust JavaScript components and utilities, perfect for building scalable web applications.
TypeScript
Metronic's core components are entirely written in TypeScript, offering robust typing and enhanced maintainability. You can interact with these components using the TypeScript API.
Webpack
Our Webpack builder offers an essential tool for managing, bundling, and optimizing assets, including CSS, images, and fonts, as well as JavaScript files and modules. For more details, visit Webpack Guide.
Integration
Easily integrate Metronic 9 with your favorite frameworks, whether it's React, Vue, Laravel, or ASP.NET Core. Metronic provides comprehensive integration guides for all popular frameworks.
For more details, visit Integration Guide.
Composer
For those who have already purchased Metronic, we offer a Composer tool for an extra fee to optimize their development with Metronic and save more time. For more details, visit Composer Guide.
Metronic Composer is an HTML file-based mini CMS built with Python, Flask, and Jinja. It dynamically serves Metronic Tailwind HTML templates, helping developers efficiently manage HTML code through structured partials, blocks, layouts, and page contents, making code browsing and extraction easier.
Features
- Hand-crafted UI/UX with attention to detail
- Mobile-first fully responsive design
- Built-in dark mode support
- Over 1000+ UI elements
- Over 100+ enterprise-grade pages
- 40+ CSS and JavaScript components
- Build tools for development optimization
- Compatibility with all popular backend and frontend frameworks
- Use all features within your existing projects
Components
Metronic's all CSS and JavaScript-based components are fully compatible with Tailwind CSS.
The following is a list of custom-made Tailwind CSS components:
- Accordion
- Avatar
- Button
- Badge
- Card
- Collapse
- Container
- Tabs
- Drawer
- Dropdown
- DataTable
- Dismiss
- Progress
- Table
- Tooltip & Popover
- Toggle
- Theme
- Modal
- Scrollspy
- Rating
- Reparrent
- Menu
- Stepper
- Scrollto
- Scrollable
- Sticky
- Pagination
- Input
- Select
- Switch
- Checkbox
- Radio
- Range
- Image Input
- Toggle Password
- Input Group
- File Input
- Textarea
- KeenIcons
- ApexCharts
- Clipboard
Check out the above components in Live Preview.
Pages
The following is a list of thoughtfully crafted pages offered by Metronic 9.
-
Dashboards
- Light Sidebar
- Dark Sidebar
-
User
- Public Profile
- Profiles
- Default
- Creator
- Company
- NFT
- Blogger
- CRM
- More
- Gamer
- Feeds
- Plain
- Modal
- Projects
- 3 Columns
- 2 Columns
- Works
- Teams
- Network
- Activity
- More
- Campaigns - Card
- Campaigns - List
- Empty
- My Account
- Account Home
- Get Started
- User Profile
- Company Profile
- Settings - With Sidebar
- Settings - Enterprise
- Settings - Plain
- Settings - Modal
- Billing
- Billing - Basic
- Billing - Enterprise
- Plans
- Billing History
- Security
- Get Started
- Security Overview
- Allowed IP Addresses
- Privacy Settings
- Device Management
- Backup & Recovery
- Current Sessions
- Security Log
- Members & Roles
- Teams Starter
- Teams
- Team Info
- Members Starter
- Team Members
- Import Members
- Roles
- Permissions - Toggler
- Permissions - Check
- Integrations
- Notifications
- API Keys
- More
- Appearance
- Invite a Friend
- Activity
- Network
- Get Started
- User Cards
- Mini Cards
- Team Crew
- Author
- NFT
- Social
- User Table
- Team Crew
- App Roster
- Market Authors
- SaaS Users
- Store Clients
- Visitors
- Cooperations (Soon)
- Leads (Soon)
- Donators (Soon)
- Authentication
- Classic
- Sign In
- Sign Up
- 2FA
- Check Email
- Reset Password
- Enter Email
- Check Email
- Change Password
- Password is Changed
- Branded
- Sign In
- Sign Up
- 2FA
- Check Email
- Reset Password
- Enter Email
- Check Email
- Change Password
- Password is Changed
- Welcome Message
- Account Deactivated
- Error 404
- Error 500
-
Apps
- User Management (Soon)
- Projects (Soon)
- eCommerce (Soon)
-
Miscellaneous
- Modals (Soon)
- Wizards (Soon)
Check out the above pages in Live Preview.
Documentation
Our interactive documentation includes over 20 JavaScript components, 1000+ elements, and numerous code snippets. Detailed API documentation ensures you have all the information needed to implement and customize each component with ease. For more details visit Metronic's Full Documentation.
What's Next?
We are continuously expanding our toolkit with more JavaScript components, such as calendars, date pickers, color pickers, and advanced CRUD solutions with data tables and form flows. Follow us at @keenthemes to stay tuned for these exciting updates!
Conclusion
Metronic has been actively developed since 2013, backed by a passionate team dedicated to helping developers build their products quickly and at a low cost. We handle the repetitive and challenging tasks, allowing you to focus on your business logic and product ideas. Tons of new features are planned for the next decade, ensuring Metronic remains your go-to solution for web development.
Top comments (1)
Great article! The templates are well-designed. Keep up the fantastic work!