Download
Download the Metronic Integration Examples to get started.
This integration example uses Rails 8.0.2 with PostgreSQL and Propshaft.
Download the Metronic Integration Examples from our GitHub repository .
Please note that the sample project does not include the Metronic Tailwind CSS source files by default. To integrate the styles, you need to copy the Metronic Tailwind CSS source files from your downloaded Metronic folder.
1
Clone Integration Repository
Clone the integration repository:
git clone https://github.com/keenthemes/metronic-tailwind-html-integration.git
cd metronic-tailwind-html-integration/metronic-tailwind-rails
2
Copy Assets Folder
Copy the
assets
folder from
metronic-tailwind-html-demos/dist
to
app/assets/
.
3
Install Dependencies
Install dependencies:
# Install Ruby gems
bundle install
# Install Node.js packages
yarn install
4
Setup Database
Setup the database:
# Create database
bin/rails db:create
# Run migrations
bin/rails db:migrate
# Seed database (optional)
bin/rails db:seed
5
Start Development Server
Start the development server:
# Start the Rails server
bin/rails server
# Or specify host and port
bin/rails server -b 0.0.0.0 -p 3000
Open
http://localhost:3000
to view the demo layouts:
# Demo 1 - Sidebar Layout
http://localhost:3000/demo1
# Demo 2 - Navbar Layout
http://localhost:3000/demo2
# Root redirects to Demo 1
http://localhost:3000/
If you prefer to create a project from scratch, follow the manual setup steps in the next section.
Create Project
Create a new Rails 8 project with Propshaft asset pipeline, configured for Metronic integration.
This guide assumes you have Ruby 3.1+, Rails 8.0+, and PostgreSQL 12+ installed. For a ready-to-use Rails project, you can download our pre-configured example from the Download section.
1
Create Rails 8 Project
Generate a new Rails 8 project with PostgreSQL and modern asset pipeline tools:
# Create new Rails 8 project
rails new metronic-rails-app \
--database=postgresql \
--css=tailwind \
--javascript=importmap
# Navigate to project directory
cd metronic-rails-app
2
Configure Database
Create the PostgreSQL database for your application:
# Create databases
bin/rails db:create
Ensure your PostgreSQL server is running.
3
Configure Propshaft for Metronic
Configure Rails 8 Propshaft to handle Metronic assets by updating
config/application.rb
:
# config/application.rb
module MetronicRailsApp
class Application < Rails::Application
config.load_defaults 8.0
# Add Metronic asset paths
config.assets.paths << Rails.root.join("app/assets/media")
config.assets.paths << Rails.root.join("app/assets/vendors")
end
end
4
Create Asset Directory Structure
Set up the directory structure for Metronic assets:
# Create Metronic asset directories
mkdir -p app/assets/media
mkdir -p app/assets/vendors
# Create view directories for layouts and partials
mkdir -p app/views/metronic/demo1/partials
mkdir -p app/views/metronic/demo2/partials
mkdir -p app/views/partials
5
Install Additional Gems
Add the
image_processing
gem for Active Storage support by running:
# Add gem to your Gemfile and install
bundle add image_processing
6
Test Rails Setup
Verify your Rails 8 setup is working correctly:
# Start Rails development server
bin/rails server
Your Rails 8 application should now be running at
http://localhost:3000
. Your project is ready for Metronic integration.
Integrate Core
Create Rails controllers and routes to display Metronic layouts with two demo controllers.
This section assumes you have completed the "Create Project" steps. We'll be creating minimal Rails controllers focused on demonstrating Metronic layouts with sample data.
1
Generate Rails Controllers
Create Rails controllers for the Metronic demo layouts:
# Generate controllers for demo layouts
bin/rails generate controller Home index
bin/rails generate controller Demo1 index
bin/rails generate controller Demo2 index
2
Configure Routes
Set up Rails routes for Metronic demo pages. Update
config/routes.rb
:
Rails.application.routes.draw do
get "up" => "rails/health#show", as: :rails_health_check
root "home#index"
get "demo1", to: "demo1#index"
get "demo2", to: "demo2#index"
end
3
Configure Controllers for Metronic Layouts
Configure controllers to use Metronic layouts.
Update
app/controllers/home_controller.rb
to redirect to demo1:
class HomeController < ApplicationController
def index
redirect_to demo1_path
end
end
Update
app/controllers/demo1_controller.rb
for sidebar layout:
class Demo1Controller < ApplicationController
layout "metronic/demo1_base"
def index
@page_title = "Dashboard"
@page_description = "Central Hub for Personal Customization"
# Add your dashboard data here...
end
end
Update
app/controllers/demo2_controller.rb
for navbar layout following the same pattern.
4
Configure Application Controller
Add common functionality to your Application controller.
Update
app/controllers/application_controller.rb
with Metronic-specific helpers:
class ApplicationController < ActionController::Base
allow_browser versions: :modern
before_action :set_current_user
before_action :set_theme_mode
protected
def set_current_user
# Replace with your authentication logic
@current_user = OpenStruct.new(
name: "John Doe",
email: "john@example.com"
)
end
def set_theme_mode
@theme_mode = session[:theme_mode] || "light"
end
end
5
Add Helper Methods
Create Rails application helpers for Metronic integration. Update
app/helpers/application_helper.rb
:
module ApplicationHelper
def full_page_title(title = nil)
base_title = "Metronic Rails"
title.blank? ? base_title : "#{title} | #{base_title}"
end
def nav_active?(path)
"active" if current_page?(path)
end
def status_badge(status)
case status.downcase
when "active", "completed", "success"
"badge badge-success"
when "pending", "in progress"
"badge badge-warning"
else
"badge badge-secondary"
end
end
end
6
Test Core Integration
Test your Rails core setup before proceeding to template integration:
# Check routes are configured
bin/rails routes | grep -E "(demo1|demo2)"
# Start the development server
bin/rails server
# Test the routes
curl -I http://localhost:3000/demo1
curl -I http://localhost:3000/demo2
You should see HTTP responses. The pages will show template missing errors until templates are integrated.
Integrate Styles
Integrate Metronic HTML templates and styling into your Rails project. Convert HTML to ERB templates and configure Propshaft.
This section assumes you have completed the "Create Project" and "Integrate Core" steps. Make sure you have the Metronic HTML files available for copying assets and templates.
1
Copy Metronic Assets
Copy the Metronic assets from your downloaded HTML package to your Rails project:
# Copy assets from Metronic HTML package
# Replace /path/to/metronic-tailwind-html with your actual path
cp -r /path/to/metronic-tailwind-html-demos/dist/assets/* app/assets/
# Verify the assets are copied
ls -la app/assets/
# You should see directories like: css/, js/, media/, vendors/
2
Create Base Template Partials
Create reusable template partials for common elements.
Create
app/views/partials/_head.html.erb
with Rails asset helpers:
<%# ERB template for HTML head %>
<meta charset="utf-8"/>
<title>
<%= full_page_title(@page_title) %>
</title>
<meta %="" admin="" content="<%= @page_description || " dashboard"="" metronic="" name="description"/>
" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<!--begin::Fonts(mandatory for all pages)-->
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" rel="stylesheet"/>
<!--end::Fonts-->
<!--begin::Global Stylesheets Bundle(mandatory for all pages)-->
<%= stylesheet_link_tag "plugins/global/plugins.bundle", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "css/style.bundle", "data-turbo-track": "reload" %>
<!--end::Global Stylesheets Bundle-->
<!--begin::Vendor Stylesheets(used for this page only)-->
<%= yield :vendor_css %>
<!--end::Vendor Stylesheets-->
</meta>
Create
app/views/partials/_scripts.html.erb
and
app/views/partials/_theme_mode.html.erb
following the same pattern.
3
Convert Metronic HTML to Rails Templates
Convert static Metronic HTML files into dynamic Rails ERB templates by extracting reusable components into partials.
For a detailed, step-by-step guide on this process, please refer to the Convert Layouts section.
4
Key Rails Template Conversions
When converting Metronic HTML to Rails ERB templates, apply these key transformations:
<%# 1. Set the layout in your controller %>
class Demo1Controller < ApplicationController
layout "metronic/demo1_base"
end
<%# 2. Convert static asset paths %>
<%# FROM: src="assets/media/logos/logo.svg" %>
<%# TO: %> <%= image_tag "media/logos/logo.svg" %>
<%# 3. Use ERB for variables and logic %>
<%# FROM:
<h1>
Dashboard
</h1>
%>
<%# TO: %>
<h1>
<%= @page_title || "Dashboard" %>
</h1>
<%# 4. Loop through Rails instance variables %>
<%% @stats.each do |stat| %>
<div class="stat-card">
<%= stat[:title] %>: <%= stat[:value] %>
</div>
<%% end %>
5
Configure Asset Precompilation
For production, ensure Rails precompiles all necessary assets. Update
config/initializers/assets.rb
:
# config/initializers/assets.rb
Rails.application.config.assets.precompile += %w[
plugins/global/plugins.bundle.css
css/style.bundle.css
plugins/global/plugins.bundle.js
js/scripts.bundle.js
]
6
Test Complete Integration
Test your complete Metronic Rails integration:
# Start the development server
bin/rails server
# Test both layouts in your browser:
# http://localhost:3000/demo1
# http://localhost:3000/demo2
# Check browser console for any JavaScript errors
# Verify all CSS and JS files are loading correctly
You should now see fully functional Metronic layouts with proper styling, JavaScript functionality, and Rails integration!
7
Production Deployment
For production, precompile assets and configure a CDN for best performance.
Convert Layouts
Convert Metronic HTML layouts to Rails ERB templates by extracting reusable components into partials.
1
Analyze HTML Structure
Examine the Metronic HTML layouts to understand their structure.
# Demo1 Structure - Sidebar Layout
metronic-tailwind-html-demos/dist/demo1/index.html
└─ <html>
├─ <head>
│ └─ Meta, CSS, favicon
└─ <body>
├─ Theme Mode Script
├─ Sidebar
├─ Header
├─ Main Content
├─ Footer
└─ JavaScript includes
# Demo2 Structure - Navbar Layout
metronic-tailwind-html-demos/dist/demo2/index.html
└─ <html>
├─ <head>
│ └─ Meta, CSS, favicon
└─ <body>
├─ Theme Mode Script
├─ Header with Navbar
├─ Main Content
├─ Footer
└─ JavaScript includes
Demo1 uses a fixed sidebar, while Demo2 features a horizontal navbar.
2
Extract Base Layouts & Partials
Create shared partials from common HTML elements and set up the base layouts:
# Extract shared partials from HTML
app/views/partials/_head.html.erb
app/views/partials/_theme_mode.html.erb
app/views/partials/_scripts.html.erb
# Create base layout hierarchy for each demo
app/views/metronic/demo1_base.html.erb
app/views/metronic/demo2_base.html.erb
The base layouts (`demo1_base.html.erb`, `demo2_base.html.erb`) will contain the root HTML structure and include the shared partials.
3
Create Layout-Specific Partials
Convert layout-specific components to Rails ERB partials:
# Demo1 Sidebar Layout Partials
app/views/metronic/demo1/partials/_sidebar.html.erb
app/views/metronic/demo1/partials/_header.html.erb
app/views/metronic/demo1/partials/_footer.html.erb
# Demo2 Navbar Layout Partials
app/views/metronic/demo2/partials/_header.html.erb
app/views/metronic/demo2/partials/_navbar.html.erb
app/views/metronic/demo2/partials/_footer.html.erb
Each partial should preserve the original HTML structure, CSS classes, and data attributes from the source HTML files.
4
Assemble the Base Layouts
Transform the main HTML body structure into your base layout ERB files. This example is for `demo1_base.html.erb`:
<!DOCTYPE html>
<html lang="en">
<head>
<%= render "partials/head" %>
</head>
<body>
<%= render "partials/theme_mode" %>
<div class="d-flex flex-column flex-root">
<div class="page d-flex flex-row flex-column-fluid">
<%= render "metronic/demo1/partials/sidebar" %>
<div class="wrapper d-flex flex-column flex-row-fluid">
<%= render "metronic/demo1/partials/header" %>
<div class="content d-flex flex-column flex-column-fluid">
<div class="d-flex flex-column-fluid">
<%= yield %>
</div>
</div>
<%= render "metronic/demo1/partials/footer" %>
</div>
</div>
</div>
<%= render "partials/scripts" %>
</body>
</html>
5
Handle Asset References
Update all asset paths to work with the Rails asset pipeline (Propshaft):
<%# Convert HTML asset references to Rails asset helpers %>
<%# Original HTML %>
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet"/>
<script src="assets/js/scripts.bundle.js">
</script>
<%# Converted ERB %>
<%= stylesheet_link_tag "plugins/global/plugins.bundle", "data-turbo-track": "reload" %>
<%= javascript_include_tag "js/scripts.bundle", "data-turbo-track": "reload" %>
<%# Update image sources %>
<%# Original HTML %>
<img src="assets/media/logos/default-dark.svg"/>
<%# Converted ERB %>
<%= image_tag "media/logos/default-dark.svg" %>
Verify that all converted assets load correctly by checking your Propshaft configuration and testing the templates in your Rails application.
Layout conversion complete! Your Metronic HTML layouts are now fully integrated as Rails ERB templates with proper asset handling and partials.
