Download
Download the Metronic Integration Examples to get started with AssetMapper (no Node.js required).
This integration example uses Symfony 7.2 with AssetMapper (no Node.js required).
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. You need to copy the Metronic assets from your downloaded Metronic folder to complete the integration.
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-symfony
2
Copy Metronic Assets
Copy the
assets
folder from
metronic-tailwind-html-demos/dist
to
assets/assets/
.
cp -r metronic-tailwind-html-demos/dist/assets/* metronic-tailwind-symfony/assets/assets/
3
Install Dependencies
Install dependencies:
# Install dependencies
composer install
# Install additional packages if needed
composer require symfony/asset-mapper
composer require symfony/twig-bundle
4
Start Development Server
Start the development server:
# Start the development server
symfony serve
# Or use PHP built-in server
php -S localhost:8000 -t public/
Open
http://127.0.0.1:8000
to view the demo layouts:
# Demo 1 - Sidebar Layout
http://127.0.0.1:8000/demo1/
# Demo 2 - Header Layout
http://127.0.0.1:8000/demo2/
If you prefer to create a project from scratch, follow the manual setup steps in the next sections.
Create Project
Create a new Symfony project from scratch with Metronic integration.
1
Install Symfony CLI
Install the Symfony CLI tool for project management.
2
Create New Symfony Project
Create a new Symfony project with the webapp template:
# Create new Symfony project
symfony new metronic-tailwind-symfony --version="7.*" --webapp
# Navigate to project directory
cd metronic-tailwind-symfony
3
Install Required Dependencies
Install the essential packages for Metronic integration:
# Install AssetMapper for asset management
composer require symfony/asset-mapper
# Install additional packages for development
composer require symfony/maker-bundle --dev
composer require fakerphp/faker --dev
4
Configure Environment
Set up your local environment variables:
# Copy environment configuration
cp .env .env.local
# Edit .env.local for your local settings
# APP_ENV=dev
# APP_DEBUG=true
5
Prepare Asset Directory
Create the directory structure for Metronic assets:
# Create assets directory structure
mkdir -p assets
mkdir -p assets/{css,js,media,vendors,styles}
# Verify directory structure
tree assets/ -L 3
Your Symfony project is ready for Metronic integration.
Integrate Core
Integrate Metronic assets using Symfony's AssetMapper component (no Node.js required).
AssetMapper is Symfony's approach to asset management, replacing traditional build tools.
1
Copy Metronic Assets
Copy Metronic distribution assets to your project:
# Copy assets from Metronic distribution
cp -r /path/to/metronic-tailwind-html-demos/dist/assets/* assets/assets/
# Verify asset structure
ls -la assets/assets/
# Should contain: css/ js/ media/ vendors/
Note: Metronic provides static CSS files in the
css/
directory. The
styles/
directory does not exist in Metronic distributions.
2
Update Main Asset Entry
Configure your main asset entry point in
assets/app.js
to import Metronic's CSS files:
// Import Metronic CSS files
import './assets/css/styles.css';
import './assets/vendors/keenicons/styles.bundle.css';
// Import any additional scripts as needed
console.log('Metronic Tailwind CSS ready!');
Important:
Import the actual CSS files from the
css/
and
vendors/
directories.
3
Configure AssetMapper
The AssetMapper will automatically discover assets in your
assets/
directory. Verify the configuration:
# Check discovered assets
php bin/console debug:asset-map | head -20
# Check specific asset mapping
php bin/console debug:asset-map app
# Compile assets (optional for development)
php bin/console asset-map:compile --dry-run
4
Create Demo Controllers
Generate controllers for your Metronic demo layouts:
# Generate controllers
php bin/console make:controller Demo1Controller
php bin/console make:controller Demo2Controller
Configure routes in
config/routes.yaml
:
demo1_routes:
resource: ../src/Controller/Demo1Controller.php
type: attribute
prefix: /demo1
demo2_routes:
resource: ../src/Controller/Demo2Controller.php
type: attribute
prefix: /demo2
Core integration is complete! The AssetMapper will automatically handle asset versioning, caching, and HTTP/2 optimization for your Metronic assets.
Integrate Styles
Convert Metronic HTML templates to Symfony Twig templates and set up the dual layout system.
1
Create Base Template Structure
Set up the template hierarchy with shared partials:
# Create template directory structure
mkdir -p templates/{partials,demo1/{partials},demo2/{partials}}
# Create base templates
touch templates/base.html.twig
touch templates/demo1/base.html.twig
touch templates/demo2/base.html.twig
2
Create Shared Partials
Create reusable partials for common elements:
# Create shared partials
touch templates/partials/head.html.twig # Meta tags, CSS, favicon
touch templates/partials/scripts.html.twig # JavaScript includes
touch templates/partials/theme-mode.html.twig # Theme mode toggle script
These partials handle asset loading using Symfony's
asset()
function.
3
Setup Demo1 Layout (Sidebar)
Configure the sidebar layout components:
# Create Demo1 layout partials
touch templates/demo1/partials/sidebar.html.twig # Main navigation sidebar
touch templates/demo1/partials/header.html.twig # Top header bar
touch templates/demo1/partials/footer.html.twig # Page footer
# Create Demo1 pages
touch templates/demo1/index.html.twig
The sidebar layout uses Metronic's
data-kt-drawer
components for responsive navigation.
4
Setup Demo2 Layout (Header)
Configure the header layout components:
# Create Demo2 layout partials
touch templates/demo2/partials/header.html.twig # Main header with logo
touch templates/demo2/partials/navbar.html.twig # Navigation menu
touch templates/demo2/partials/toolbar.html.twig # User toolbar
touch templates/demo2/partials/footer.html.twig # Page footer
# Create Demo2 pages
touch templates/demo2/index.html.twig
The header layout utilizes Metronic's
data-kt-header
and
data-kt-toolbar
components for horizontal navigation.
5
Configure Asset References
Update asset paths to use the
assets/
structure:
{# Example asset references in templates #}
<link href="{{ asset('vendors/keenicons/styles.bundle.css') }}" rel="stylesheet"/>
<link href="{{ asset('css/styles.css') }}" rel="stylesheet"/>
<script src="{{ asset('vendors/apexcharts/apexcharts.min.js') }}">
</script>
<script src="{{ asset('js/core.bundle.js') }}">
</script>
6
Reference HTML Layouts
Reference the original Metronic HTML layouts for conversion guidance:
# Demo1 - Sidebar Layout
metronic-tailwind-html-demos/dist/html/demo1/index.html
# Demo2 - Header Layout
metronic-tailwind-html-demos/dist/html/demo2/index.html
Demo1 features a sidebar navigation layout, while Demo2 uses a header-based navigation system. For detailed conversion steps, refer to the next section.
Template integration complete! Your Symfony application now features both Metronic demo layouts with proper asset loading and dynamic content support.
Convert Layouts
Convert Metronic HTML layouts to Symfony Twig templates by extracting reusable components.
1
Analyze HTML Structure
Examine the Metronic HTML layouts to understand their structure:
# Demo1 Structure - Sidebar Layout
metronic-tailwind-html-demos/dist/html/demo1/index.html
├── <head> - Meta tags, CSS, favicon
├── <body class="demo1 kt-sidebar-fixed kt-header-fixed">
│ ├── Theme Mode Script
│ ├── Sidebar (<div class="kt-sidebar">)
│ ├── Header (<div class="kt-header">)
│ ├── Main Content (<main class="kt-content">)
│ └── Footer (<div class="kt-footer">)
└── JavaScript includes
# Demo2 Structure - Header Layout
metronic-tailwind-html-demos/dist/html/demo2/index.html
├── <head> - Meta tags, CSS, favicon
├── <body class="[--header-height:100px]">
│ ├── Theme Mode Script
│ ├── Header (<header class="h-(--header-height)">)
│ ├── Main Content (<main class="flex grow flex-col">)
│ └── Footer (<div class="kt-footer">)
└── JavaScript includes
Demo1 uses a fixed sidebar with vertical navigation, while Demo2 features a horizontal header with dropdown navigation.
2
Extract Base Template
Create shared components from common HTML elements:
# Extract shared partials from HTML head section
templates/partials/head.html.twig # Meta tags, CSS links, favicon
templates/partials/theme-mode.html.twig # Theme switching script
templates/partials/scripts.html.twig # JavaScript includes
# Create base template hierarchy
templates/base.html.twig # Root template with common structure
templates/demo1/base.html.twig # Demo1-specific layout
templates/demo2/base.html.twig # Demo2-specific layout
The base template should include the HTML5 structure, head partial, theme mode script, and JavaScript includes. Layout-specific templates extend this base and define their unique body structure.
3
Create Layout Partials
Convert layout-specific components to Twig partials:
# Demo1 Sidebar Layout Components
templates/demo1/partials/sidebar.html.twig # Navigation sidebar with kt-sidebar
templates/demo1/partials/header.html.twig # Top header bar with kt-header
templates/demo1/partials/footer.html.twig # Page footer
# Demo2 Header Layout Components
templates/demo2/partials/header.html.twig # Main header with logo and navigation
templates/demo2/partials/navbar.html.twig # Navigation menu components
templates/demo2/partials/toolbar.html.twig # User toolbar and actions
templates/demo2/partials/footer.html.twig # Page footer
Each partial should preserve the original HTML structure, CSS classes, and data attributes. Focus on extracting the core layout elements while maintaining Metronic's responsive behavior and component functionality.
4
Convert Body Structure
Transform the main HTML body structure to Twig templates:
{# Demo1 Body Structure Example #}
<body class="antialiased flex h-full demo1 kt-sidebar-fixed kt-header-fixed">
{{ include('partials/theme-mode.html.twig') }}
<div class="flex grow">
{{ include('demo1/partials/sidebar.html.twig') }}
<div class="kt-wrapper flex grow flex-col">
{{ include('demo1/partials/header.html.twig') }}
<main class="kt-content flex grow flex-col">
{% block content %}{% endblock %}
</main>
{{ include('demo1/partials/footer.html.twig') }}
</div>
</div>
</body>
{# Demo2 Body Structure Example #}
<body class="antialiased flex h-full [--header-height:100px]">
{{ include('partials/theme-mode.html.twig') }}
<div class="flex grow flex-col">
{{ include('demo2/partials/header.html.twig') }}
<main class="flex grow flex-col">
{% block content %}{% endblock %}
</main>
{{ include('demo2/partials/footer.html.twig') }}
</div>
</body>
5
Handle Asset References
Update all asset paths to work with Symfony's AssetMapper:
{# Convert HTML asset references to Symfony asset() function #}
<!-- Original HTML -->
<link href="assets/vendors/keenicons/styles.bundle.css" rel="stylesheet"/>
<script src="assets/js/core.bundle.js">
</script>
<!-- Converted Twig -->
<link href="{{ asset('vendors/keenicons/styles.bundle.css') }}" rel="stylesheet"/>
<script src="{{ asset('js/core.bundle.js') }}">
</script>
{# Update image sources #}
<!-- Original HTML -->
<img src="assets/media/app/default-logo.svg"/>
<!-- Converted Twig -->
<img src="{{ asset('media/app/default-logo.svg') }}"/>
Verify that all converted assets load correctly by checking the AssetMapper configuration and testing the compiled templates in your Symfony application.
Layout conversion complete! Your Metronic HTML layouts are now fully integrated as Symfony Twig templates with proper asset handling and component structure.
