Metronic Tailwind

https://keenthemes.com/metronic/tailwind/docs/
Admin
Metronic is a comprehensive Tailwind CSS toolkit with 1000+ UI elements, 50+ components, and 10 demo...
Tokens:128,075
Snippets:937
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Start Server

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/angular

Commands to install project dependencies and launch the development server.

```bash
npm install
ng serve
```

--------------------------------

### Launch Development Server

Source: https://keenthemes.com/metronic/tailwind/docs/composer

Execute the startup script to install dependencies and start the preview server.

```batch
run.bat --debug
```

```bash
./run.sh --debug
```

--------------------------------

### Install Project Dependencies

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel-livewire

Initial setup commands to install PHP and Node.js dependencies and configure the environment.

```bash
composer install

npm install

cp .env.example .env
php artisan key:generate
```

--------------------------------

### Start Rails development server

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/rails

Verify the Rails 8 setup by starting the development server.

```bash
# Start Rails development server
bin/rails server
```

--------------------------------

### Setup Virtual Environment and Dependencies

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/django

Commands to initialize a Python virtual environment and install required project dependencies.

```bash
# Create virtual environment
python -m venv venv

# Activate virtual environment
# On macOS/Linux:
source venv/bin/activate
# On Windows:
venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt
```

--------------------------------

### Verify Django Project Setup

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/django

Commands to validate configuration, apply migrations, and start the development server.

```bash
# Check for configuration issues
python manage.py check

# Run initial migration
python manage.py migrate

# Test the development server
python manage.py runserver
```

--------------------------------

### Start Development Server

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/vue

Launch the Vue development server.

```bash
npm run serve
```

--------------------------------

### Environment Setup

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/django

Commands to verify Python, create a project directory, and initialize a virtual environment.

```bash
# Check Python version (3.10+ required)
python --version

# Create project directory
mkdir my-metronic-django
cd my-metronic-django

# Create virtual environment
python -m venv venv

# Activate virtual environment
# On macOS/Linux:
source venv/bin/activate
# On Windows:
venv\Scripts\activate

# Upgrade pip
pip install --upgrade pip
```

--------------------------------

### Start the application

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/flask

Use these commands to launch the development environment on different operating systems.

```bash
./start.sh        # macOS/Linux
start.bat         # Windows
```

--------------------------------

### Setup Demo1 Layout Partials

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/symfony

Initialize layout-specific partials for the Demo1 sidebar structure.

```bash
# 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
```

--------------------------------

### Clone Integration Repository

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/rails

Download the base integration repository to begin the setup process.

```bash
git clone https://github.com/keenthemes/metronic-tailwind-html-integration.git
cd metronic-tailwind-html-integration/metronic-tailwind-rails
```

--------------------------------

### Install Dependencies and Build Assets

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel

Install required PHP and Node.js packages and compile assets for development.

```bash
# Install PHP dependencies
composer install

# Install Node.js dependencies
npm install

# Build assets for development
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/installation

Install all project dependencies defined in the package.json file.

```bash
npm install
```

--------------------------------

### Serve Vue Application

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/vue

Start the development server to view the application.

```bash
npm run dev
```

--------------------------------

### Run Automated Setup Scripts

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/flask

Executes the platform-specific setup script to configure the environment.

```bash
# macOS/Linux
./setup.sh

# Windows
setup.bat
```

--------------------------------

### Test production build

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel

Starts the local development server using the production environment configuration.

```bash
php artisan serve --env=production
```

--------------------------------

### Start Development Server

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/django

Commands to launch the local development server with optional host and port configuration.

```bash
# Start the development server
python manage.py runserver

# Or specify host and port
python manage.py runserver 0.0.0.0:8000
```

--------------------------------

### Public API and Initialization

Source: https://keenthemes.com/metronic/tailwind/docs/plugins/datatables-net

Exposes the filter setup and provides an example configuration for table initialization.

```javascript
global.DataTablesColumnFilter = {
		filterTypes: filterTypes,
		setup: setupColumnFilter
	};

	// --- Example init (user replaces this config for their table) ---

	var exampleConfig = {
		tableSelector: '#example-column-filter',
		dataTableOptions: {},
		filters: [
			{ key: 'name', columnIndex: 0, type: 'exact', inputSelectors: ['#filter-name'] },
			{ key: 'position', columnIndex: 1, type: 'exact', inputSelectors: ['#filter-position'] },
			{ key: 'office', columnIndex: 2, type: 'contains', inputSelectors: ['#filter-office'] },
			{ key: 'age', columnIndex: 3, type: 'range', inputSelectors: ['#filter-age-min', '#filter-age-max'] }
		]
	};

	document.addEventListener('DOMContentLoaded', function() {
		setupColumnFilter(exampleConfig);
	});

})(typeof window !== 'undefined' ? window : this);
```

--------------------------------

### Run the Flask application

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/flask

Execute this command to start the development server.

```bash
python run.py
```

--------------------------------

### Run ASP.NET Core Development Server

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/asp.net-core

Start the development server to serve the application.

```bash
dotnet run watch
```

```bash
dotnet run watch
```

--------------------------------

### Install Dependencies

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/rails

Install the required Ruby gems and Node.js packages for the project.

```bash
# Install Ruby gems
bundle install

# Install Node.js packages
yarn install
```

--------------------------------

### Test Integration

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel

Commands to start development servers and verify layout accessibility via curl.

```bash
# Start both development servers
php artisan serve &
npm run dev &

# Test all demo layouts:
curl -I http://127.0.0.1:8000/demo1   # Sidebar layout
curl -I http://127.0.0.1:8000/demo2   # Header layout
curl -I http://127.0.0.1:8000/demo3   # Minimal layout
curl -I http://127.0.0.1:8000/demo4   # Creative layout
curl -I http://127.0.0.1:8000/demo5   # Modern layout
curl -I http://127.0.0.1:8000/demo6   # Professional layout
curl -I http://127.0.0.1:8000/demo7   # Corporate layout
curl -I http://127.0.0.1:8000/demo8   # Executive layout
curl -I http://127.0.0.1:8000/demo9   # Premium layout
curl -I http://127.0.0.1:8000/demo10  # Ultimate layout

# Check browser console for JavaScript errors
# Verify all CSS and JS files are loading correctly
```

--------------------------------

### Start Development Server and Test URLs

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/django

Commands to launch the Django server and verify endpoint accessibility.

```bash
python manage.py runserver

# Test the URLs (in another terminal or browser)
curl -I http://127.0.0.1:8000/demo1/
curl -I http://127.0.0.1:8000/demo2/
```

--------------------------------

### Install Dependencies and Build Assets

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/asp.net-core

Run npm commands to install required packages and compile theme assets.

```bash
npm install & npm run build
```

```bash
npm install & npm run build
```

--------------------------------

### Start the Flask development server

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/flask

Use these scripts to launch the application on your local machine.

```bash
./start.sh        # macOS/Linux
start.bat         # Windows

# Or manually
python3 run.py
```

--------------------------------

### Create the application entry point

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/flask

Define the run.py file to initialize and start the Flask application.

```python
from app import create_app

app = create_app()

if __name__ == '__main__':
    app.run(debug=True, host='127.0.0.1', port=5000)
```

--------------------------------

### View demo layout URLs

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/flask

Access these URLs in your browser after starting the server.

```text
# Demo 1 - Sidebar Layout
http://127.0.0.1:5000/demo1/

# Demo 2 - Header Layout
http://127.0.0.1:5000/demo2/
```

--------------------------------

### Start Rails Development Server

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/rails

Command to launch the local development server for testing Metronic layouts.

```bash
bin/rails server
```

--------------------------------

### Start Development Server

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel-livewire

Commands to launch the Laravel server and the Vite asset compiler in separate terminals.

```bash
# Start Laravel development server
php artisan serve

# In another terminal, start Vite (for app assets only)
npm run dev
```

--------------------------------

### Start Rails Development Server

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/rails

Commands to launch the Rails server with optional host and port configuration.

```bash
# Start the Rails server
bin/rails server

# Or specify host and port
bin/rails server -b 0.0.0.0 -p 3000
```

--------------------------------

### Create Laravel Project with Livewire

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel-livewire

Commands to initialize a new Laravel project, install Livewire and Alpine.js, and configure the environment.

```bash
# Create new Laravel project
composer create-project laravel/laravel metronic-livewire
cd metronic-livewire

# Install Livewire and Alpine.js
composer require livewire/livewire
npm install alpinejs

# Set up environment
cp .env.example .env
php artisan key:generate
```

--------------------------------

### Implement Menu Component States

Source: https://keenthemes.com/metronic/tailwind/docs/components/menu

Example demonstrating the application of active, show, here, and disabled states within a menu structure.

```html
<div class="kt-menu kt-menu-default flex flex-col border border-border rounded-lg w-full max-w-56 py-2">
 <div class="kt-menu-item">
  <a class="kt-menu-link" href="#">
   <span class="kt-menu-icon">
    <i class="ki-outline ki-badge">
    </i>
   </span>
   <span class="kt-menu-title">
    Default/Hover states
   </span>
  </a>
 </div>
 <div class="kt-menu-item active">
  <a class="kt-menu-link" href="#">
   <span class="kt-menu-icon">
    <i class="ki-outline ki-badge">
    </i>
   </span>
   <span class="kt-menu-title">
    Active state
   </span>
  </a>
 </div>
 <div class="kt-menu-item show">
  <a class="kt-menu-link" href="#">
   <span class="kt-menu-icon">
    <i class="ki-outline ki-badge">
    </i>
   </span>
   <span class="kt-menu-title">
    Show state
   </span>
   <span class="kt-menu-badge" data-kt-tooltip="true">
    <i class="ki-outline ki-information-2">
    </i>
    <span class="kt-tooltip" data-kt-tooltip-content="true">
     Has shown submenu
    </span>
   </span>
  </a>
 </div>
 <div class="kt-menu-item here">
  <a class="kt-menu-link" href="#">
   <span class="kt-menu-icon">
    <i class="ki-outline ki-badge">
    </i>
   </span>
   <span class="kt-menu-title">
    Here state
   </span>
   <span class="kt-menu-badge" data-kt-tooltip="true">
    <i class="ki-outline ki-information-2">
    </i>
    <span class="kt-tooltip" data-kt-tooltip-content="true">
     Has active child in submenu
    </span>
   </span>
  </a>
 </div>
 <div class="kt-menu-item disabled">
  <a class="kt-menu-link" href="#">
   <span class="kt-menu-icon">
    <i class="ki-outline ki-badge">
    </i>
   </span>
   <span class="kt-menu-title">
    Disabled state
   </span>
  </a>
 </div>
</div>
```

--------------------------------

### Programmatically Control KTMenu

Source: https://keenthemes.com/metronic/tailwind/docs/components/menu

Example of retrieving a KTMenu instance and using its methods to show or hide menu items.

```javascript
const menuEl = document.querySelector('#my_menu');
const menuItemEl = document.querySelector('#my_menu_item_1');

const menu = KTMenu.getInstance(menuEl);

menu.show(menuItemEl);
menu.hide(menuItemEl);
```

--------------------------------

### Table HTML Structure

Source: https://keenthemes.com/metronic/tailwind/docs/plugins/datatables-net

Example HTML structure for a table header with integrated filter toggle and dropdown container.

```html
<table class="display" id="example-column-filter" style="width:100%">
 <thead>
  <tr>
   <th>
    <div class="inline-flex min-h-0 items-center gap-1" style="position:relative">
     <span>
      Name
     </span>
     <button aria-label="Filter by name" class="kt-btn kt-btn-icon kt-btn-ghost column-filter-toggle h-7 w-7 min-h-7 min-w-7 shrink-0 p-0 [&_svg]:size-3.5" data-column="name" type="button">
      <svg fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
       <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3">
       </polygon>
      </svg>
     </button>
     <div class="column-filter-dropdown absolute top-full left-0 mt-1 z-10 min-w-[10rem] rounded-lg border border-border bg-background p-2 shadow-md" data-dropdown="name" style="display:none">
```

--------------------------------

### DataTables Column Filter Setup

Source: https://keenthemes.com/metronic/tailwind/docs/plugins/datatables-net

Core function to initialize DataTables with custom filtering predicates and event listeners.

```javascript
function setupColumnFilter(config) {
		var tableSelector = config.tableSelector;
		var tableEl = typeof tableSelector === 'string'
			? document.querySelector(tableSelector)
			: (tableSelector && tableSelector.nodeType ? tableSelector : null);

		if (!tableEl || typeof global.$ === 'undefined' || !global.$.fn.DataTable || global.$.fn.DataTable.isDataTable(tableEl))
			return null;

		var tableId = tableEl.id || 'dt-column-filter-' + Math.random().toString(36).slice(2, 9);
		if (!tableEl.id) tableEl.id = tableId;

		var dataTableOptions = Object.assign({
			searching: true,
			language: { search: '', searchPlaceholder: 'Search' },
			layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
		}, config.dataTableOptions || {});

		var table = global.$(tableEl).DataTable(dataTableOptions);
		var filters = config.filters || [];

		// Single custom search predicate that runs all filters
		global.$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
			if (settings.nTable.id !== tableId) return true;
			for (var i = 0; i < filters.length; i++) {
				var f = filters[i];
				var colIndex = f.columnIndex;
				var cellValue = data[colIndex] != null ? data[colIndex] : '';
				var filterValue = getFilterValue(f, tableEl);
				if (!rowMatchesFilter(f, cellValue, filterValue)) return false;
			}
			return true;
		});

		table.draw();

		// UI: dropdown toggle + stop propagation at dropdown container so input/select receive events but th does not trigger sort
		bindDropdownStopPropagation(tableEl);
		bindDropdownToggle(tableEl, tableId);

		// Redraw when any filter input changes
		filters.forEach(function(f) {
			(f.inputSelectors || []).forEach(function(sel) {
				var el = tableEl.querySelector(sel);
				if (el) {
					el.addEventListener('change', function() { table.draw(); });
					el.addEventListener('input', function() { table.draw(); });
				}
			});
		});

		return table;
	}
```

--------------------------------

### Manually set up a Flask project

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/flask

Follow these commands to initialize a new project directory, virtual environment, and basic folder structure.

```bash
# Create project directory
mkdir metronic-flask
cd metronic-flask

# Create virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install Flask
pip install Flask

# Create basic structure
mkdir -p app/demo1 app/demo2 templates/demo1 templates/demo2 templates/partials
```

--------------------------------

### Install Required Dependencies

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/symfony

Commands to install AssetMapper and development-specific bundles.

```bash
# 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
```

--------------------------------

### Verify Python Installation

Source: https://keenthemes.com/metronic/tailwind/docs/composer

Check the installed version of Python to ensure compatibility.

```bash
python --version
```

```bash
python3 --version
```

--------------------------------

### Install Dependencies

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/symfony

Commands to install project dependencies and required Symfony bundles.

```bash
composer install

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

--------------------------------

### Install Required Dependencies

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/vue

Install the necessary Keenthemes and Popper.js packages for the project.

```bash
npm install @keenthemes/ktui @popperjs/core
```

--------------------------------

### Create Demo2 Layout Partials and Index

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/symfony

Initialize the header, navbar, toolbar, footer, and index templates for the Demo2 layout.

```bash
# 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
```

--------------------------------

### Configure environment and database

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel

Initializes the environment file, generates the application key, and runs database migrations.

```bash
# Copy and configure environment
cp .env.example .env
php artisan key:generate

# Configure database (edit .env file)
# DB_CONNECTION=mysql
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=my_metronic_app
# DB_USERNAME=root
# DB_PASSWORD=

# Create database and run migrations
php artisan migrate
```

--------------------------------

### Install Django dependencies

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/django

Install the required packages for Django, static file serving, and testing.

```bash
pip install Django>=5.1.0
pip install whitenoise  # For static file serving
pip install pytest-django  # For testing

# Create requirements.txt
pip freeze > requirements.txt
```

--------------------------------

### Create New ASP.NET Core Project

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/asp.net-core

Initialize a new MVC project using the .NET CLI.

```bash
dotnet new mvc -n metronic-tailwind-aspnet-core
```

--------------------------------

### Install Vendor Package via NPM

Source: https://keenthemes.com/metronic/tailwind/docs/customization/webpack

Command to install a new vendor package and save it to project dependencies.

```bash
npm install apexcharts --save
```

--------------------------------

### Update NPM

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/installation

Install the latest version of NPM globally.

```bash
npm install --global npm@latest
```

--------------------------------

### Create New Blazor Project

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/blazor-server

Initialize a new Blazor Server project using the .NET CLI.

```bash
dotnet new blazor -o metronic-tailwind-blazor-server
```

--------------------------------

### Initialize Base Layout Files

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel

Create empty Blade layout files for each demo version using the touch command.

```bash
# Create base layout files for each demo
touch resources/views/layouts/demo1/base.blade.php
touch resources/views/layouts/demo2/base.blade.php
touch resources/views/layouts/demo3/base.blade.php
touch resources/views/layouts/demo4/base.blade.php
touch resources/views/layouts/demo5/base.blade.php
touch resources/views/layouts/demo6/base.blade.php
touch resources/views/layouts/demo7/base.blade.php
touch resources/views/layouts/demo8/base.blade.php
touch resources/views/layouts/demo9/base.blade.php
touch resources/views/layouts/demo10/base.blade.php
```

--------------------------------

### Optimize Composer autoloader

Source: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel

Installs dependencies with an optimized autoloader and excludes development packages.

```bash
composer install --optimize-autoloader --no-dev
```

--------------------------------

### Navigate to Composer Root

Source: https://keenthemes.com/metronic/tailwind/docs/composer

Change directory to the package root before running the installation script.

```bash
cd metronic-composer
```
Tokens:
Raw