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

Symfony

With this setup, you can easily integrate Metronic Tailwind with your Symfony project using the AssetMapper component (no Node.js required). This integration leverages Symfony 7.x's native asset management and Metronic's sleek UI components, offering a streamlined development experience with built-in asset versioning, import maps, and HTTP/2 optimization.

Download

To set up the Metronic Tailwind CSS integration in Symfony, you can download the Metronic Integration Examples from our GitHub repository . These examples provide a working Symfony project using AssetMapper (no Node.js required) 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. You need to copy the Metronic assets from your downloaded Metronic folder to complete the integration.

1

Clone Integration Repository

Clone the Metronic integration repository to get the Symfony example: 
				
					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 the metronic-tailwind-html/dist directory into your Symfony project's assets/assets/ directory. The resulting structure should be assets/assets/ . 
				
					# From your metronic-tailwind-html distribution
cp -r metronic-tailwind-html/dist/assets/* metronic-tailwind-symfony/assets/assets/

# Verify the structure
ls metronic-tailwind-symfony/assets/assets/
# Should show: css/ js/ media/ vendors/ styles/
3

Install Dependencies

Install the required Symfony dependencies including AssetMapper: 
				
					# Install dependencies
composer install

# Install additional packages if needed
composer require symfony/asset-mapper
composer require symfony/twig-bundle
4

Start Development Server

Launch your Symfony application: 
				
					# Start the development server
symfony serve

# Or use PHP built-in server
php -S localhost:8000 -t public/
Open your browser and navigate to http://127.0.0.1:8000 to see your Symfony app. You can explore both 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

This section covers creating a new Symfony project from scratch with Metronic integration. If you're new to Symfony, refer to the official Symfony documentation for detailed installation and setup instructions.
1

Install Symfony CLI

Install the Symfony CLI tool for project management. See the official installation guide for your operating system.
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 now ready for Metronic integration. Continue to the next section to configure AssetMapper for Metronic assets.

Integrate Core

This section focuses on integrating Metronic assets using Symfony's AssetMapper component. AssetMapper provides native asset management without requiring Node.js, offering built-in versioning, import maps, and HTTP/2 optimization.

AssetMapper is Symfony's approach to asset management, replacing traditional build tools. Learn more at the official AssetMapper documentation .

1

Copy Metronic Assets

Copy Metronic distribution assets to your project: 
				
					# Copy assets from Metronic distribution
cp -r /path/to/metronic-tailwind-html/dist/assets/* assets/assets/

# Verify asset structure
ls -la assets/assets/
# Should contain: css/ js/ media/ vendors/ styles/
2

Update Main Asset Entry

Configure your main asset entry point in assets/app.js : 
				
					// Import main styles from assets subdirectory
import './assets/styles/app.css';

// Import any additional scripts as needed
console.log('Metronic Tailwind CSS ready!');
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

This section covers converting Metronic HTML templates to Symfony Twig templates and setting up the dual layout system (sidebar and header layouts). The integration maintains Metronic's component structure while leveraging Symfony's templating capabilities.

For detailed Twig templating patterns and best practices, refer to the official Twig documentation .

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. See the example partials in the repository.
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/dist/html/demo1/index.html

# Demo2 - Header Layout
metronic-tailwind-html/dist/html/demo2/index.html
These HTML files contain the complete layout structures that you need to convert to Symfony Twig templates. Demo1 features a sidebar navigation layout, while Demo2 uses a header-based navigation system.
For detailed HTML-to-Twig conversion steps and complete template examples, refer to the next section and the templates directory in the repository.

Template integration complete! Your Symfony application now features both Metronic demo layouts with proper asset loading and dynamic content support.

For complete template examples and advanced component integration, explore the templates directory in the repository.

Convert Layouts

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

This conversion process focuses on the structural transformation from HTML to Twig. For advanced Twig templating techniques, refer to the official Twig documentation .

1

Analyze HTML Structure

Examine the Metronic HTML layouts to understand their structure: 
				
					# Demo1 Structure - Sidebar Layout
metronic-tailwind-html/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/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
Note the key differences: Demo1 uses a fixed sidebar with vertical navigation, while Demo2 features a horizontal header with dropdown navigation. Both layouts share common elements like head sections, theme scripts, and footer components.
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.

For complete converted template examples and advanced integration patterns, explore the templates directory in the repository.

Previous Django 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