### Metronic Quick Setup Guide

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started

Instructions for quickly setting up a new project with the Metronic template, including dependency installation.

```APIDOC
Quick Setup:
  Install dependencies using Yarn or NPM.
  Use custom Gulp or Webpack build tools.
  Example:
    npm install
    gulp build
```

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

### Metronic Quick Setup Guide

Source: https://preview.keenthemes.com/html/metronic/docs/index

Instructions for quickly setting up a new project with the Metronic template, including dependency installation.

```APIDOC
Quick Setup:
  Install dependencies using Yarn or NPM.
  Use custom Gulp or Webpack build tools.
  Example:
    npm install
    gulp build
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/updates

Guides for quick project setup and implementing dark mode for the layout and components.

```HTML
// Quick Setup Quick project setup
// Dark Mode Dark Mode Setup for Layout & Components
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/setup

Guides for quick project setup and configuring dark mode for the layout and components.

```HTML
// Quick Setup
// Dark Mode Setup for Layout & Components
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/illustrations

Guides on quick project setup and implementing dark mode for layouts and components.

```JavaScript
/* Quick project setup */
/* Dark Mode Setup for Layout & Components */
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/video-tutorials

Guides on quick project setup and configuring dark mode for the layout and components.

```JavaScript
Quick Setup
Quick project setup
Dark Mode
Dark Mode Setup for Layout & Components
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/rtl

Guides for quick project setup and configuring dark mode for the layout and components.

```HTML
// Quick Setup
// Dark Mode Setup for Layout & Components
```

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

### Theme Setup Examples

Source: https://preview.keenthemes.com/html/metronic/docs/general/datatables/api

Provides guidance on setting up the project, including quick project setup and dark mode configuration for the layout and components.

```HTML
<!-- Quick project setup -->
<!-- Dark Mode Setup for Layout & Components -->
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/forms/bootstrap-select

Guides for quick project setup and implementing dark mode for layouts and components.

```html
Quick project setup
Dark Mode Setup for Layout & Components
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/changelog

Guides for quick project setup and configuring dark mode for layouts and components.

```HTML
Quick Setup
Quick project setup
Dark Mode
Dark Mode Setup for Layout & Components
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/editors/tinymce/basic

Guides for quick project setup and configuring dark mode for the layout and components.

```APIDOC
Quick Setup Quick project setup
Dark Mode Dark Mode Setup for Layout & Components
```

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

### Project Setup and Configuration

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/file-structure

Guides for quick project setup, including dark mode configuration for layout and components, and integration with Select2 and Flatpickr for date/time pickers.

```HTML
/* Quick Setup */
/* Quick project setup */
/* Dark Mode */
/* Dark Mode Setup for Layout & Components */
/* Select2 */
/* Select2 and Bootstrap Integration */
/* Flatpickr */
/* Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker */
/* Datepicker */
/* Tempus Dominus Bootstrap Datepicker */
```

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

### Project Setup and Features

Source: https://preview.keenthemes.com/html/metronic/docs/base/helpers/text

Guides for quick project setup, dark mode configuration for layout and components, and general suggestions for using the theme.

```HTML
Quick Setup Quick project setup
Dark Mode Dark Mode Setup for Layout & Components
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/general/tiny-slider/basic

Guides for quick project setup and configuring dark mode for the layout and components.

```HTML
Quick Setup Quick project setup
Dark Mode Dark Mode Setup for Layout & Components
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/charts/google-charts/pie

Guides for quick project setup and configuring dark mode for the layout and components.

```JavaScript
/* Quick Setup */
/* Quick project setup */
/* Dark Mode */
/* Dark Mode Setup for Layout & Components */
```

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

### Project Setup and Features

Source: https://preview.keenthemes.com/html/metronic/docs/general/jstree/checkable

Guides for quick project setup, enabling Dark Mode, and integrating libraries like Select2 and Flatpickr.

```Markdown
/* Quick Setup Quick project setup */
/* Dark Mode Dark Mode Setup for Layout & Components */
/* Select2 Select2 and Bootstrap Integration */
/* Flatpickr Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker */
/* Datepicker Tempus Dominus Bootstrap Datepicker */
```

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

### Metronic HTML Template Setup & Build

Source: https://preview.keenthemes.com/html/metronic/docs/general/menu/advanced

Guides users through the initial setup of the Metronic HTML template, including quick project setup and build process automation using Gulp and Webpack. It covers multi-demo concepts and file structure organization.

```Documentation
Quick project setup
Gulp build
Webpack Module bundler
Multi-demo concept & usage
File Structure
Theme File Structure Organization
Template Structure
```

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

### Project Setup and Features

Source: https://preview.keenthemes.com/html/metronic/docs/base/helpers/flex-layouts

Provides guidance on project setup, including quick start options and dark mode configuration for layouts and components. Also covers integration with popular libraries like Select2 and Flatpickr.

```Markdown
### Quick Setup
### Dark Mode
### Select2 and Bootstrap Integration
### Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/charts/google-charts/line

Guides on quick project setup and configuring dark mode for the layout and components.

```HTML
Quick Setup Quick project setup
Dark Mode Dark Mode Setup for Layout & Components
```

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

### jKanban Examples

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/file-structure

Showcases the jKanban plugin for creating Kanban boards. Includes examples for basic setup, colored items, restricted movement, rich content, and fixed height configurations.

```JavaScript
/* jKanban Overview */
/* jKanban & Bootstrap Integration */
/* Basic jKanban */
/* Basic Examples */
/* Colored jKanban */
/* Colored Items Examples */
/* Restricted jKanban */
/* Restricted Items Examples */
/* Rich Content */
/* Rich Content Examples */
/* Fixed Height */
/* Fixed Height Basic Examples */
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/editors/tinymce/hidden

Guides for quick project setup and implementing dark mode for layouts and components.

```JavaScript
Quick Setup Quick project setup
Dark Mode Dark Mode Setup for Layout & Components
```

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

### Quick Setup and Dark Mode Configuration

Source: https://preview.keenthemes.com/html/metronic/docs/charts/flotcharts/pie

Guides for quick project setup and configuring dark mode for the layout and components.

```HTML
<!-- Quick Setup -->
<!-- ... instructions for quick project setup ... -->

<!-- Dark Mode Setup -->
<!-- ... instructions for setting up dark mode ... -->

```

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

### jKanban Examples

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/video-tutorials

Illustrates the use of jKanban, a JavaScript plugin for creating Kanban boards. Examples include basic setup, colored items, restricted dragging, rich content, and fixed height configurations.

```JavaScript
jKanban Overview
jKanban & Bootstrap Integration
Basic jKanban
Basic Examples
Colored jKanban
Colored Items Examples
Restricted jKanban
Restricted Items Examples
Rich Content jKanban
Rich Content Examples
Fixed Height jKanban
Basic Examples
```

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

### Metronic Theme Setup and Customization

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/build

Guides users through the initial setup, build processes using Gulp and Webpack, and customization options for the Metronic theme. Covers template structure, Sass, JavaScript, and options for removing jQuery.

```HTML
#### Getting Started
Overview
Quick Setup
Build Assets
Gulp
Webpack
Multi-demo
File Structure
Customization
Template
Sass
Javascript
No jQuery
Custom Bundles
Video Tutorials
Dark Mode New
RTL Version
Downloads
Illustrations
Updates
References
Licenses & FAQs
Changelog v8.3.1
```

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

### Metronic Documentation Navigation & Updates

Source: https://preview.keenthemes.com/html/metronic/docs/general/vis-timeline/basic

Information on product documentation, quick setup guides, video tutorials, RTL version setup, and update guidelines.

```documentation
Overview Product Documentation
Quick Setup
Quick project setup
Video Tutorials
Youtube video tutorials
RTL Version
Theme & Bootstrap RTL Version Setup
Changelog
Versions & Updates Information
Updates
General Update Guidelines
```

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

### Metronic Theme Setup and Customization

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started

Guides users through the initial setup, build processes using Gulp and Webpack, and customization options for the Metronic theme. Covers template structure, Sass, JavaScript, and options for removing jQuery.

```HTML
#### Getting Started
Overview
Quick Setup
Build Assets
Gulp
Webpack
Multi-demo
File Structure
Customization
Template
Sass
Javascript
No jQuery
Custom Bundles
Video Tutorials
Dark Mode New
RTL Version
Downloads
Illustrations
Updates
References
Licenses & FAQs
Changelog v8.3.1
```

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

### Metronic Setup and Structure

Source: https://preview.keenthemes.com/html/metronic/docs/editors/ckeditor/balloon

Guides on quick project setup, multi-demo concepts, file structure organization, and SASS/JavaScript customization.

```APIDOC
Metronic Setup and Structure:
  Quick Setup: Quick project setup
  Multi-demo: Multi-demo concept & usage
  File Structure: Theme File Structure Organization
  SASS: SASS Structure & Customization
  Javascript: Javascript Structure & Customization
  No jQuery: Remove jQuery from build
  Custom Bundles: Create Custom Bundles
```

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

### Metronic HTML Template Setup and Build

Source: https://preview.keenthemes.com/html/metronic/docs/general/jstree/basic

Guides on quick project setup, Gulp build automation, and Webpack module bundling for Metronic HTML template. Covers multi-demo concepts and file structure organization.

```Gulp
Automate & enhance your build workflow
```

```Webpack
Module bundler for build process automation
```

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

### jKanban Examples

Source: https://preview.keenthemes.com/html/metronic/docs/base/ribbon

Illustrates the use of jKanban for creating Kanban boards, with examples for basic setup, colored items, restricted dragging, rich content, and fixed height configurations.

```JavaScript
/* jKanban Overview */
/* jKanban & Bootstrap Integration */
/* Basic jKanban */
/* Basic Examples */
/* Colored jKanban */
/* Colored Items Examples */
/* Restricted jKanban */
/* Restricted Items Examples */
/* Rich Content jKanban */
/* Rich Content Examples */
/* Fixed Height jKanban */
/* Basic Examples */
```

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

### jKanban Examples

Source: https://preview.keenthemes.com/html/metronic/docs/general/menu/api

Illustrates the use of jKanban for creating Kanban boards, with examples for basic setup, colored items, restricted items, rich content, and fixed height configurations.

```JavaScript
jKanban Overview
Basic jKanban Basic Examples
Colored jKanban Colored Items Examples
Restricted jKanban Restricted Items Examples
Rich Content jKanban Rich Content Examples
Fixed Height jKanban Basic Examples
```

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

### Metronic Theme Setup and Customization

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/updates

Guides users through the initial setup, build processes using Gulp and Webpack, and customization options for the Metronic theme. Covers template structure, Sass, JavaScript, and options for removing jQuery.

```HTML
#### Getting Started
Overview
Quick Setup
Build Assets
Gulp
Webpack
Multi-demo
File Structure
Customization
Template
Sass
Javascript
No jQuery
Custom Bundles
Video Tutorials
Dark Mode New
RTL Version
Downloads
Illustrations
Updates
References
Licenses & FAQs
Changelog v8.3.1
```

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

### Metronic Theme Setup and Customization

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/video-tutorials

Guides users through the initial setup, build processes using Gulp and Webpack, and customization options for the Metronic theme. Covers template structure, Sass, JavaScript, and options for removing jQuery.

```HTML
#### Getting Started
Overview
Quick Setup
Build Assets
Gulp
Webpack
Multi-demo
File Structure
Customization
Template
Sass
Javascript
No jQuery
Custom Bundles
Video Tutorials
Dark Mode New
RTL Version
Downloads
Illustrations
Updates
References
Licenses & FAQs
Changelog v8.3.1
```

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

### Metronic Quill Editor Integration

Source: https://preview.keenthemes.com/html/metronic/docs/charts/flotcharts/pie

Guides on integrating the Quill rich text editor with basic setup and examples.

```JavaScript
// Quill Initialization
// var quill = new Quill('#editor', {
//   theme: 'snow',
//   modules: { toolbar: ['bold', 'italic'] }
// });
```

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

### Metronic Theme Setup and Customization

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/changelog

Guides users through the initial setup, build processes using Gulp and Webpack, and customization options for the Metronic theme. Covers template structure, Sass, JavaScript, and options for removing jQuery.

```HTML
#### Getting Started
Overview
Quick Setup
Build Assets
Gulp
Webpack
Multi-demo
File Structure
Customization
Template
Sass
Javascript
No jQuery
Custom Bundles
Video Tutorials
Dark Mode New
RTL Version
Downloads
Illustrations
Updates
References
Licenses & FAQs
Changelog v8.3.1
```

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

### Metronic Quill Editor Integration

Source: https://preview.keenthemes.com/html/metronic/docs/charts/flotcharts/pie

Guides on integrating the Quill rich text editor with basic setup and examples.

```JavaScript
// Quill Basic Initialization
// var quill = new Quill('#editor', { theme: 'snow' });
```

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

### Metronic Documentation: Overview and Setup

Source: https://preview.keenthemes.com/html/metronic/docs/general/tiny-slider/overview

This section covers the initial steps for using Metronic, including product overview, quick project setup, and understanding the multi-demo concepts.

```N/A
Overview Product Documentation
Quick Setup
Quick project setup
Multi-demo
Multi-demo concept & usage
```

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

### Metronic Theme Setup and Customization

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/rtl

Guides users through the initial setup, build processes using Gulp and Webpack, and customization options for the Metronic theme. Covers template structure, Sass, JavaScript, and options for removing jQuery.

```HTML
#### Getting Started
Overview
Quick Setup
Build Assets
Gulp
Webpack
Multi-demo
File Structure
Customization
Template
Sass
Javascript
No jQuery
Custom Bundles
Video Tutorials
Dark Mode New
RTL Version
Downloads
Illustrations
Updates
References
Licenses & FAQs
Changelog v8.3.1
```

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

### Metronic Theme Setup and Customization

Source: https://preview.keenthemes.com/html/metronic/docs/index

Guides users through the initial setup, build processes using Gulp and Webpack, and customization options for the Metronic theme. Covers template structure, Sass, JavaScript, and options for removing jQuery.

```HTML
#### Getting Started
Overview
Quick Setup
Build Assets
Gulp
Webpack
Multi-demo
File Structure
Customization
Template
Sass
Javascript
No jQuery
Custom Bundles
Video Tutorials
Dark Mode New
RTL Version
Downloads
Illustrations
Updates
References
Licenses & FAQs
Changelog v8.3.1
```

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

### Metronic Theme Setup and Customization

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp

Guides users through the initial setup, build processes using Gulp and Webpack, and customization options for the Metronic theme. Covers template structure, Sass, JavaScript, and options for removing jQuery.

```HTML
#### Getting Started
Overview
Quick Setup
Build Assets
Gulp
Webpack
Multi-demo
File Structure
Customization
Template
Sass
Javascript
No jQuery
Custom Bundles
Video Tutorials
Dark Mode New
RTL Version
Downloads
Illustrations
Updates
References
Licenses & FAQs
Changelog v8.3.1
```

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

### Bootstrap Swapper Component

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/customization/template

Guides on using the Bootstrap Swapper component for dynamically swapping content or elements. Includes setup and usage examples.

```JavaScript
// Example: Initializing the Swapper component
var swapperElement = document.getElementById('kt_swapper_element');
var swapper = new bootstrap.Swapper(swapperElement, {
    // Options for source, target, animation, etc.
    source: '#kt_swapper_source',
    target: '#kt_swapper_target',
    animation: 'fade'
});

// Example: Triggering a swap
// swapper.swap();

// Example: Swapping content dynamically
// function updateSwapperContent(newContent) {
//     document.getElementById('kt_swapper_source').innerHTML = newContent;
//     swapper.swap();
// }
```

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

### Quill Editor Integration

Source: https://preview.keenthemes.com/html/metronic/docs/forms/dropzonejs

Metronic's guide to integrating Quill, a modern and extensible rich text editor, with examples for basic setup.

```APIDOC
Quill Editor Integration:
  Description: Quill is a modern, extensible rich text editor built for compatibility and extensibility. Metronic provides integration examples.
  Features:
    - Clean API and modular architecture.
    - Supports various text formatting options.
    - Extensible with custom modules and formats.
  Usage:
    Include the Quill JavaScript and CSS files.
    Create a container element for the editor.
    Instantiate Quill on the container element.
  Example (Quill Basic):
    var quill = new Quill('#kt_quill_basic', {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{'list': 'ordered'}, {'list': 'bullet'}],
                [{'header': [1, 2, 3, 4, 5, 6, false]}],
                [{'color': []}, {'background': []}],
                [{'font': []}],
                [{'align': []}],
                ['link', 'image', 'video'],
                ['clean']
            ]
        }
    });
```

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

### Quick Project Setup

Source: https://preview.keenthemes.com/html/metronic/docs/forms/daterangepicker

Provides a quick guide for setting up a new project using the Metronic HTML template, covering essential initial steps.

```HTML
Quick Setup Quick project setup
```

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

### Bootstrap Stepper and Wizard Component

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/customization/template

Guides on implementing the Bootstrap Stepper and Wizard components for multi-step forms and processes. Includes setup and usage examples.

```JavaScript
// Example: Initializing a Bootstrap Stepper
var stepper = new KTStepper('kt_stepper_example');

stepper.on('kt.stepper.changed', function (stepper) {
    // Handle step change event
    console.log('Current step:', stepper.getCurrentStep());
});

stepper.on('kt.stepper.next', function (stepper) {
    // Logic before moving to the next step
    stepper.goNext();
});

stepper.on('kt.stepper.previous', function (stepper) {
    // Logic before moving to the previous step
    stepper.goPrevious();
});

// Example: Wizard functionality often involves form validation and conditional steps.
```

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

### Metronic Project Setup & Build Tools

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/setup

Guides users through setting up a Metronic project, including automating and enhancing the build workflow with Gulp and utilizing Webpack for module bundling and build process automation.

```Gulp
gulp build
// Automate & enhance your build workflow
```

```Webpack
webpack --config webpack.config.js
// Module bundler for build process automation
```

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

### Bootstrap Quick Search Component

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/customization/template

Guides on implementing the Bootstrap Quick Search component for fast searching within lists or tables. Includes setup and usage examples.

```JavaScript
// Example: Initializing the Quick Search component
var quickSearch = new bootstrap.QuickSearch('#kt_quick_search_form', {
    // Options for search input, results container, etc.
    inputSelector: '#kt_quick_search_input',
    resultsSelector: '#kt_quick_search_results',
    // Example: Callback function when search is performed
    onSearch: function(query) {
        console.log('Searching for:', query);
        // Perform actual search logic here (e.g., AJAX call)
    }
});

// Example: Manually triggering a search
// quickSearch.search('some query');

// Example: Clearing the search results
// quickSearch.clear();
```

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

### Project Setup and Build Tools

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp

Explains Metronic's Gulp build tools for package management, production deployment, and asset bundling to organize project structure.

```Gulp
/* Metronic's Gulp build tools provide easy package management and production deployment for any type of web application that also comes with powerful asset bundle tools to organize assets structure with custom bundling for production. */
```

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

### Fullcalendar Basic Example

Source: https://preview.keenthemes.com/html/metronic/docs/general/fullcalendar/basic

This snippet shows a basic setup for the Fullcalendar JavaScript library, including how to initialize it and populate it with data. It's a starting point for integrating a calendar into your project.

```javascript
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
      {
        title: 'All Day Event',
        start: '2023-10-01'
      },
      {
        title: 'Long Event',
        start: '2023-10-07',
        end: '2023-10-10'
      },
      {
        title: 'Meeting',
        start: '2023-10-12T10:30:00'
      }
    ]
  });
  calendar.render();
});
```

```html
<div id='calendar'></div>
```

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

### jsTree Integration and Examples

Source: https://preview.keenthemes.com/html/metronic/docs/base/helpers/text

Guides for jsTree, a jQuery plugin for creating interactive trees. Covers basic setup, contextual menus, custom icons, drag-and-drop, AJAX data loading, and checkable trees.

```JavaScript
jsTree Overview
jsTree & Bootstrap Integration
Basic jsTree Basic Examples
Contextual Menu jsTree Contextual Menu Examples
Custom Icons jsTree Custom Icons Examples
Drag & Drop jsTree Drag & Drop Examples
Checkable Tree jsTree Checkable Tree Examples
Ajax Data jsTree Ajax Data Examples
```

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

### Metronic v8.0.29 New Features and Updates

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/changelog

Details new demos (14 and 15) and the 'No-jQuery' setup guide in Metronic v8.0.29, alongside updates to User Management app, Bootstrap Input Group integration, and Advanced Form Controls examples.

```Changelog
### Metronic v8.0.29 - 29 October, 2021 
### New:
  * `Demo 14` - Preview.
  * `Demo 14 Dark Mode` - Preview.
  * `Demo 15` - Preview.
  * `Demo 15 Dark Mode` - Preview.
  * `No-jQuery` setup guide - Preview.
  * `Dynamic Initialization` of core components and 3rd-party plugins - Preview.


### Update:
  * `User Management` app enhancements - Preview.
  * `Bootstrap Input Group` integration - Preview.
  * `Advanced Form Controls` examples - Preview.
```

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

### Project Setup and Features

Source: https://preview.keenthemes.com/html/metronic/docs/general/menu/api

Covers essential project setup steps like Quick Setup and Dark Mode configuration, as well as integration with libraries like Select2 and Flatpickr.

```JavaScript
Quick Setup Quick project setup
Dark Mode Dark Mode Setup for Layout & Components
Select2 Select2 and Bootstrap Integration
Flatpickr Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker
```

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

### Metronic Dark Mode Setup

Source: https://preview.keenthemes.com/html/metronic/docs/forms/bootstrap-multiselectsplitter

Implement Dark Mode for Metronic's layout and components. This guide covers the setup process to enable a dark theme.

```Dark Mode
Dark Mode Setup for Layout & Components
```

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

### Quick Project Setup

Source: https://preview.keenthemes.com/html/metronic/docs/general/datatables/subtable

Guidance on quickly setting up a new project.

```JavaScript
Quick Setup Quick project setup
```

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

### jKanban Basic Examples

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started

Basic examples for using the jKanban plugin to create Kanban boards.

```JavaScript
// jKanban Basic Example Code Snippet
// This section would contain actual JavaScript code for jKanban.
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/forms/formrepeater/advanced

Guides on quick project setup and configuring dark mode for the layout and components.

```JavaScript
Quick Setup Quick project setup Dark Mode Dark Mode Setup for Layout & Components
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/forms/formrepeater/nested

Guides for quick project setup and configuring dark mode for the layout and components.

```JavaScript
// Quick Setup Example
// ... code for quick project setup ...

// Dark Mode Setup Example
// ... code for dark mode setup ...
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/references

Provides guidance on quick project setup and configuring dark mode for the layout and components.

```Markdown
Quick Setup Quick project setup
Dark Mode Dark Mode Setup for Layout & Components
```

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

### Metronic Build Task Setup

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/build

Commands to set up the Metronic build environment. This includes changing directory to the tools folder, installing npm dependencies, and running the primary build task.

```bash
cd theme/tools/
```

```bash
yarn
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/charts/flotcharts/axis

Guides for quick project setup and implementing dark mode for layouts and components.

```JavaScript
Quick Setup Quick project setup
Dark Mode Dark Mode Setup for Layout & Components
```

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

### Start Localhost Server

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/build

Starts a local development server to preview the Metronic theme. The server typically runs on http://localhost:8080.

```bash
gulp localhost
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/general/datatables/basic

Guides for quick project setup and configuring dark mode for the Metronic layout and components.

```HTML
Quick Setup Quick project setup
Dark Mode Dark Mode Setup for Layout & Components
```

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

### Metronic Documentation Resources

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/build

Access additional resources including video tutorials, changelogs, update guidelines, and references for 3rd-party libraries.

```documentation
Video Tutorials: Youtube video tutorials
Changelog: Versions & Updates Information
Updates: General Update Guidelines
References: 3rd-party Libraries & Resources
```

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

### Quick Setup and Dark Mode Configuration

Source: https://preview.keenthemes.com/html/metronic/docs/charts/flotcharts/bar

Guides for quick project setup and configuring the dark mode for the layout and components.

```JavaScript
// Quick Setup Example (Conceptual)
// Initialize layout and components
// KTUtil.init();

// Dark Mode Setup Example (Conceptual)
// Function to toggle dark mode
// function toggleDarkMode(isDark) {
//     if (isDark) {
//         document.body.classList.add('dark-mode');
//     } else {
//         document.body.classList.remove('dark-mode');
//     }
// }
```

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

### Quick Setup and Dark Mode

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/changelog

Provides guidance on quick project setup and configuring dark mode for layouts and components.

```Markdown
### Quick Setup
### Dark Mode
```

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

### Quick Search JavaScript Initialization and Instance

Source: https://preview.keenthemes.com/html/metronic/docs/general/search

Demonstrates how to initialize a new Quick Search instance and retrieve an existing instance using JavaScript.

```JavaScript
var searchElement = document.querySelector("#kt_search_example_1");
var search = KTSearch.getInstance(searchElement);

var searchElement = document.querySelector("#kt_search_control");
var search = new KTSearch(searchElement);
```

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

### Vis-timeline Integration and Examples

Source: https://preview.keenthemes.com/html/metronic/docs/general/tiny-slider/basic

Guides for Vis-timeline, covering Bootstrap integration, basic examples, custom styling, grouping, interaction, and template usage.

```JavaScript
Vis-timeline & Bootstrap Integration
Basic Vis-timeline Basic Examples
Custom Styling Vis-timeline Custom Styling Examples
Group Vis-timeline Group Examples
Interaction Vis-timeline Interaction Examples
Templates Vis-timeline Templates Examples
```

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

### Tiny Slider Overview and Examples

Source: https://preview.keenthemes.com/html/metronic/docs/forms/formrepeater/nested

Guides for Tiny Slider, a versatile slider component, with examples for basic usage, custom navigation, and thumbnails.

```JavaScript
// Tiny Slider Basic Example
// ... code for basic tiny slider ...

// Tiny Slider Custom Navigation Example
// ... code for tiny slider custom navigation ...

// Tiny Slider Thumbnails Example
// ... code for tiny slider thumbnails ...
```

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

### Metronic Theme Setup and Customization

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/references

Guides users through the initial setup, build processes using Gulp and Webpack, and customization options for the Metronic theme. Covers template structure, Sass, JavaScript, and options for removing jQuery.

```HTML
#### Getting Started
Overview
Quick Setup
Build Assets
Gulp
Webpack
Multi-demo
File Structure
Customization
Template
Sass
Javascript
No jQuery
Custom Bundles
Video Tutorials
Dark Mode New
RTL Version
Downloads
Illustrations
Updates
References
Licenses & FAQs
Changelog v8.3.1
```

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

### Vis-timeline Examples

Source: https://preview.keenthemes.com/html/metronic/docs/editors/tinymce/basic

Guides for using Vis-timeline to display timeline data, including basic examples, custom styling, groups, interaction, and templates.

```JavaScript
Vis-timeline & Bootstrap Integration
Basic Vis-timeline Basic Examples
Custom Styling Vis-timeline Custom Styling Examples
Group Vis-timeline Group Examples
Interaction Vis-timeline Interaction Examples
Templates Vis-timeline Templates Examples
```

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

### jKanban Examples

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/setup

Illustrates the use of jKanban for creating Kanban boards, covering basic implementation, colored items, restricted items, rich content, and fixed height configurations.

```JavaScript
// jKanban Overview
// Basic Examples
// Colored Examples
// Restricted Examples
// Rich Content Examples
// Fixed Height Examples
```

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

### Tiny Slider Examples

Source: https://preview.keenthemes.com/html/metronic/docs/base/helpers/text

Guides for Tiny Slider, a versatile slider library. Includes basic examples, custom navigation, and thumbnail support.

```JavaScript
Tiny Slider Overview
Basic Tiny Slider Basic Example
Custom Navs Tiny Slider Custom Navigation Example
Thumbnails Tiny Slider Thumbnails Example
```

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

### Vis-timeline Examples

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/video-tutorials

Covers the usage of Vis-timeline for creating interactive timelines. Examples include basic setup, custom styling, grouping, interaction, and templates.

```JavaScript
Vis-timeline & Bootstrap Integration
Basic Vis-timeline
Basic Examples
Custom Styling Vis-timeline
Custom Styling Examples
Group Vis-timeline
Group Examples
Interaction Vis-timeline
Interaction Examples
Templates Vis-timeline
Templates Examples
```

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

### Vis-timeline Examples

Source: https://preview.keenthemes.com/html/metronic/docs/base/helpers/flex-layouts

Provides examples for using Vis-timeline to visualize time-based data. Covers basic setup, custom styling, grouping, interaction, and templates.

```JavaScript
// Basic Vis-timeline Basic Examples
// Custom Styling Vis-timeline Custom Styling Examples
// Group Vis-timeline Group Examples
// Interaction Vis-timeline Interaction Examples
// Templates Vis-timeline Templates Examples
```

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

### Metronic Theme Setup and Customization

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/illustrations

Guides users through the initial setup, build processes using Gulp and Webpack, and customization options for the Metronic theme. Covers template structure, Sass, JavaScript, and options for removing jQuery.

```HTML
#### Getting Started
Overview
Quick Setup
Build Assets
Gulp
Webpack
Multi-demo
File Structure
Customization
Template
Sass
Javascript
No jQuery
Custom Bundles
Video Tutorials
Dark Mode New
RTL Version
Downloads
Illustrations
Updates
References
Licenses & FAQs
Changelog v8.3.1
```

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

### Start Localhost Server

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp

Starts a local development server to preview the Metronic theme. The server typically runs on http://localhost:8080.

```bash
gulp localhost
```

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

### Tiny Slider Examples

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/updates

Guides for Tiny Slider, a versatile slider for various purposes, including basic examples, custom navigation, and thumbnail support.

```JavaScript
// Tiny Slider Overview
// Tiny slider for all purposes
// Basic Tiny Slider
// Basic Example
// Custom Navs Tiny Slider
// Custom Navigation Example
// Thumbnails Tiny Slider
// Thumbnails Example
```

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

### jKanban Examples

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/build

Demonstrates the jKanban plugin for creating Kanban boards. Includes basic board setup, colored items, restricted item movement, and rich content within cards.

```JavaScript
/* jKanban Basic Examples */
var basicBoard = new jKanban({
    element: '#kt_jkanban_basic',
    boards: [
        { id: '_todo', title: 'To Do', class: 'info', dragTo: ['_working', '_done'] },
        { id: '_working', title: 'Working', class: 'primary', dragTo: ['_done'] },
        { id: '_done', title: 'Done', class: 'success' }
    ]
});

/* jKanban Colored Items Examples */
var coloredBoard = new jKanban({
    element: '#kt_jkanban_colored',
    boards: [
        { id: 'board1', title: 'Board 1', class: 'warning', dragTo: ['board2'] },
        { id: 'board2', title: 'Board 2', class: 'danger' }
    ],
    itemAddOptions: {
        enabled: true
    },
    boards: [
        {
            id: 'board1',
            title: 'To Do',
            class: 'info,solid',
            dragTo: ['board2', 'board3'],
            items: [
                { id: 'item1', title: 'Item 1', class: 'info,solid', dragFrom: ['board2'],
                    /* other item properties */
                }
            ]
        }
    ]
});

/* jKanban Restricted Items Examples */
// Example of restricting item movement (e.g., only allow moving to specific boards)
var restrictedBoard = new jKanban({
    element: '#kt_jkanban_restricted',
    boards: [
        { id: 'board_a', title: 'Board A', dragTo: ['board_b'] },
        { id: 'board_b', title: 'Board B' }
    ],
    itemAddOptions: {
        enabled: true
    },
    boards: [
        {
            id: 'board_a',
            title: 'To Do',
            dragTo: ['board_b'], // Can only drag to board_b
            items: [
                { id: 'item_a1', title: 'Task A1' },
                { id: 'item_a2', title: 'Task A2', dragFrom: ['board_b'] } // Can be dragged from board_b
            ]
        },
        {
            id: 'board_b',
            title: 'In Progress',
            items: [
                { id: 'item_b1', title: 'Task B1' }
            ]
        }
    ]
});

/* jKanban Rich Content Examples */
// Example of adding rich content (HTML) to jKanban items
var richContentBoard = new jKanban({
    element: '#kt_jkanban_rich_content',
    boards: [
        { id: 'board_rich', title: 'Content Board' }
    ],
    itemAddOptions: {
        enabled: true
    },
    boards: [
        {
            id: 'board_rich',
            title: 'Content',
            items: [
                { id: 'item_rich', title: '<h3>Rich Item</h3><p>This item has <strong>HTML</strong> content.</p>', class: 'info' }
            ]
        }
    ]
});

/* jKanban Fixed Height Examples */
// Example of setting a fixed height for the board container
// The jKanban element itself might need CSS for fixed height and overflow scrolling.
```

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

### Metronic Dark Mode Setup

Source: https://preview.keenthemes.com/html/metronic/docs/base/hover

Configure and implement dark mode for the Metronic layout and components. This guide covers the setup process for dark mode.

```CSS
Dark Mode Setup for Layout & Components
```

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

### Tiny Slider Examples

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/video-tutorials

Showcases Tiny Slider, a versatile slider for various purposes. Examples cover basic setup, custom navigation, and thumbnail integration.

```JavaScript
Tiny Slider Overview
Tiny slider for all purposes
Basic Tiny Slider
Basic Example
Custom Navs Tiny Slider
Custom Navigation Example
Thumbnails Tiny Slider
Thumbnails Example
```

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

### Metronic Build Task Setup

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp

Commands to set up the Metronic build environment. This includes changing directory to the tools folder, installing npm dependencies, and running the primary build task.

```bash
cd theme/tools/
```

```bash
yarn
```

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

### Metronic Build Tools: Gulp and Webpack

Source: https://preview.keenthemes.com/html/metronic/docs/getting-started/video-tutorials

Documentation on automating and enhancing the build workflow using Gulp and Webpack for Metronic. Covers module bundling and build process automation.

```Documentation
Quick project setup
Gulp build
Automate & enhance your build workflow
Webpack
Module bundler for build process automation
```

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

### Tiny Slider Examples

Source: https://preview.keenthemes.com/html/metronic/docs/general/menu/customization

Showcases the Tiny Slider plugin for creating responsive sliders. Examples include basic setup, custom navigation, and thumbnail navigation.

```JavaScript
// Tiny slider for all purposes
// Basic Tiny Slider Basic Example
// Custom Navs Tiny Slider Custom Navigation Example
// Thumbnails Tiny Slider Thumbnails Example
```

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

### Tiny Slider Basic and Custom Navigation Examples

Source: https://preview.keenthemes.com/html/metronic/docs/charts/flotcharts/pie

Examples for Tiny Slider, a versatile slider library, including basic setup and custom navigation options.

```JavaScript
// Tiny Slider Basic Example
// ... code for basic Tiny Slider setup ...

// Tiny Slider Custom Navigation Example
// ... code for custom navigation in Tiny Slider ...

// Tiny Slider Thumbnails Example
// ... code for using thumbnails in Tiny Slider ...

```