Preview Purchase
License Reminder
One license allows using Metronic for a single deployment and all subsequent usage requires a separate license.
If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License.
Getting Started Integration

Rails

With this setup, you can easily integrate Metronic Tailwind with your Rails project, taking advantage of Rails 8's modern Propshaft asset pipeline and Metronic's sleek UI components. This integration offers a robust and scalable way to style and customize your web applications, allowing you to create dynamic and visually appealing interfaces with Rails' MVC architecture and modern asset management.

Download

To set up the Metronic Tailwind CSS integration in Rails, you can download the Metronic Integration Examples from our GitHub repository . These examples provide a quick way to integrate the Metronic styles into your Rails project. This will give you a working starting point that you can customize to fit your needs.

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 Metronic integration repository to get the Rails example: 
				
					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 the metronic-tailwind-html/dist directory into your Rails project app/assets/ directory. The resulting directory structure should look like this: app/assets/css/ , app/assets/js/ , app/assets/media/ , and app/assets/vendors/ .
3

Install Dependencies

Install Ruby gems and Node.js packages: 
				
					# Install Ruby gems
bundle install

# Install Node.js packages
yarn install
4

Setup Database

Create and setup the PostgreSQL database: 
				
					# Create database
bin/rails db:create

# Run migrations
bin/rails db:migrate

# Seed database (optional)
bin/rails db:seed
5

Start Development Server

Launch your Rails application: 
				
					# Start the Rails server
bin/rails server

# Or specify host and port
bin/rails server -b 0.0.0.0 -p 3000
Open your browser and navigate to http://localhost:3000 to see your Rails app in action. You can explore both 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

This guide walks you through creating a new Rails 8 project with a modern Propshaft asset pipeline, configured for Metronic integration. We'll set up a project with PostgreSQL, Tailwind CSS, and importmap-rails.

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. For common database setup patterns, refer to the official Rails database configuration guide .
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 foundation is now ready for Metronic integration!

Integrate Core

Now that you have a Rails 8 project foundation, let's create the core Rails controllers and routes to display Metronic layouts. We'll create two demo controllers that showcase different layout styles and set up proper routing for demonstration purposes.

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. Instead of showing extensive controller code here, reference the actual project files for complete examples.
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.

For complete controller examples with extensive sample data, refer to the actual project files: metronic-tailwind-rails/app/controllers/demo1_controller.rb and metronic-tailwind-rails/app/controllers/demo2_controller.rb in the downloaded integration package.

4

Configure Application Controller

Add common functionality to your Application controller. For standard Rails controller patterns, refer to the official Rails Action Controller documentation .
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 indicating your Rails core is working. The pages will show template missing errors until we integrate the Metronic templates in the next section.

Integrate Styles

Now it's time to integrate the Metronic HTML templates and styling into your Rails project. We'll copy the necessary assets, convert HTML to Rails ERB templates, and configure Propshaft to bring your designs to life.

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/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. For standard Rails template rendering, refer to the official Rails rendering guide .
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

The process of converting the static Metronic HTML files into dynamic Rails ERB templates involves analyzing the structure, extracting reusable components into partials, and using Rails helpers for assets and logic.

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
]
For more details, see the official Rails asset pipeline guide .
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 Content Delivery Network (CDN) for best performance. For a complete guide, see the Rails production asset pipeline documentation .

Convert Layouts

This section guides you through converting Metronic HTML layouts to Rails ERB templates. The process involves analyzing the original HTML structure, extracting reusable components into partials, and adapting them for Rails ERB while preserving Metronic's design and functionality.

This conversion process focuses on the structural transformation from HTML to ERB. For advanced Rails rendering techniques, refer to the official Rails documentation .

1

Analyze HTML Structure

Examine the Metronic HTML layouts to understand their structure. The source HTML is framework-agnostic and provides the foundation for our Rails templates. 
				
					# Demo1 Structure - Sidebar Layout
metronic-tailwind-html/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/dist/demo2/index.html
└─ <html>
   ├─ <head>
   │  └─ Meta, CSS, favicon
   └─ <body>
      ├─ Theme Mode Script
      ├─ Header with Navbar
      ├─ Main Content
      ├─ Footer
      └─ JavaScript includes
Note the key differences: Demo1 uses a fixed sidebar, while Demo2 features a horizontal navbar. Both share common elements like the ` ` section, theme scripts, and footer.
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.

For complete converted template examples, explore the metronic-tailwind-rails/app/views/ directory in the repository.

Previous Asp.Net-Core Next Multi-Demo

On This Page

Download Create Project Integrate Core Integrate Styles Convert Layouts
buy metronic
License Reminder
One license allows using Metronic for a single deployment and all subsequent usage requires a separate license.
If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License.
browse ktui