1. Required Vendor files:

<script src="sweetalert2.all.min.js"></script>
<script src="polyfill.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert2.min.css">

2. Initialization:

Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  confirmButtonText: 'Cool'
});

Refer following links for detailed documentation, configuration options, methods and examples:

1. Required Vendor files:

<script src="toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="toastr.css">

2. Required Template Specific Vendor Css files

<link rel="stylesheet" type="text/css" href="toastr.css">

3. Initialization:

// Display an info toast with no title
toastr['info']('Are you the 6 fingered man?');

Refer following links for detailed documentation, configuration options, methods and examples:

1. Required Vendor files:

<script src="nouislider.min.js"></script>
<link rel="stylesheet" type="text/css" href="nouislider.min.css">

2. Required Template Specific Vendor Css files

<link rel="stylesheet" type="text/css" href="noui-slider.css">
<link rel="stylesheet" type="text/css" href="palette-noui.css">

3. Binding to existing DOM element.

<div id="slider"></div>

4. Initialization:

var slider = document.getElementById('slider');
noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

Refer following links for detailed documentation, configuration options, methods and examples:

Drag and drop so simple it hurts!

1. Required Vendor Files:

<script src='dragula.min.js'></script>
<link rel="stylesheet" type="text/css" href="dragula.min.css">

2. Required Template Specific Vendor Css files

<link rel="stylesheet" type="text/css" href="drag-and-drop.css">

3. Initialization:

dragula([document.getElementById("left"), document.getElementById("right")]);

Refer following links for detailed documentation, configuration options, methods and examples:

Guide your users through a tour of your app.

Note: Shepherd Tour does not support Internet Explorer.

1. Required Vendor Files

<script src='shepherd.min.js'></script>
<link rel="stylesheet" type="text/css" href="shepherd.min.css">

2. Required Template Specific Vendor Css files

<link rel="stylesheet" type="text/css" href="tour.css">

3. Initialization

var tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shadow-md',
    scrollTo: false,
    cancelIcon: {
      enabled: true
    }
  },
  useModalOverlay: true
});

tour.addStep('example', {
  title: 'Example Shepherd',
  text: 'Creating a Shepherd is easy too! Just create ...',
  attachTo: { element: '.hero-example', on: 'bottom' },
  buttons: [
    {
      text: 'Skip',
      classes: 'btn btn-sm btn-outline-primary',
      action: tour.cancel
    },
    {
      text: 'Next',
      classes: 'btn btn-sm btn-primary btn-next',
      action: tour.next
    }
  ]
});

tour.start();

Refer following links for detailed documentation, configuration options, methods and examples:

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

1. Required Vendor Files

<script src='swiper.min.js'></script>
<link rel="stylesheet" type="text/css" href="swiper.min.css">

2. Required Template Specific Files

<link rel="stylesheet" type="text/css" href="swiper.css">

3. Binding to existing DOM element

<div class="swiper-default swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slider 1 data</div>
    <div class="swiper-slide">Slider 2 data</div>
  </div>
</div>

4. Initialization

var mySwiper = new Swiper('.swiper-default');

Refer following links for detailed documentation, configuration options, methods and examples:

A tree view represents a hierarchical view of information, where each item can have a number of subitems.

1. Required Vendor Files

<script src='bootstrap-treeview.min.js'></script>
<link rel="stylesheet" type="text/css" href="bootstrap-treeview.min.css">

2. Required Template Specific Files

<link rel="stylesheet" type="text/css" href="ext-component-treeview.css">

3. Binding to existing DOM element

<div id="default-treeview"></div>

4. Initialization

$('#default-treeview').treeview({
  selectedBackColor: ['#5A8DEE'],
  data: defaultData
});

Refer following links for detailed documentation, configuration options, methods and examples:

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

1. Required Vendor Files

<script src='blockui.min.js'></script>

2. Binding to existing DOM element

<div class="default-blockui"></div>

3. Initialization

var blockElement = $(this).closest('.card');
$(blockElement).block({
  message: 'Your Message Here!',
  timeout: 2000, //unblock after 2 seconds
  overlayCSS: { ... }, // Write your CSS here for overlay
  css: { ... } // Write your CSS here for the message
});

Refer following links for detailed documentation, configuration options, methods and examples:

Simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.

1. Required Vendor Files

<script src='plyr.min.js'></script>
<link rel="stylesheet" type="text/css" href="plyr.css">

2. Binding to existing DOM element

<div class="default-player"></div>

3. Initialization

var player = new Plyr('.default-player');

Refer following links for detailed documentation, configuration options, methods and examples:

Clipboard is a manually created extension.

1. Binding to existing DOM element

<input type="text" class="form-control copy-to-clipboard" id="copy-to-clipboard-input" value="Copy Me!">
<button class="btn btn-primary copy-btn">Copy!</button>

2. Initialization

var userText = $(".copy-to-clipboard");
var btnCopy = $(".copy-btn");

// copy text on click
btnCopy.on("click", function () {
  userText.select();
  document.execCommand("copy");
})

Refer following links for detailed documentation, configuration options, methods and examples:

Context Menu can provide a simple list of clickable commands, or offer an in-menu form. This makes very simple attribute modification possible.

1. Required Vendor Files

<script src='jquery.contextMenu.min.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.contextMenu.min.css">

2. Required Template Specific Files

<link rel="stylesheet" type="text/css" href="context-menu.css">

3. Binding to existing DOM element

<button class="btn btn-primary basic-context-menu">Basic Context Menu<button>

4. Initialization

$.contextMenu({
  selector: ".basic-context-menu",
  callback: function (key, options) {
    var r = "clicked " + key;
    window.console && console.log(r) || alert(r);
  },
  items: {
    "Option 1": { name: "Option 1" },
    "Option 2": { name: "Option 2" },
  }
})

Refer following links for detailed documentation, configuration options, methods and examples:

The idle timer is built on jQuery and provides two events: idle.idleTimer and active.idleTimer, which fire when the user's idle state has changed. When you move your mouse over the page or start typing, you're considered "active".

1. Required Vendor Files

<script src='idle-timer.min.js'></script>
<script src='moment.min.js'></script>

2. Initialization

$(document).idleTimer({
  timeout: 10000,
  idle: true
});

Refer following links for detailed documentation, configuration options, methods and examples:

Numeral Js is a javascript library for formatting and manipulating numbers.

1. Required Vendor Files

<script src='numeral.js'></script>

2. Initialization

$(".yourClassHere").text(numeral(1000.234).format("$0,0.000"));

Refer following links for detailed documentation, configuration options, methods and examples:

18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

1. Required Vendor Files

<script src='i18next.min.js'></script>

2. Initialization

i18next.init({
  lng: 'en',
  debug: true,
  resources: {
    en: {
      translation: {
        "key": "hello world"
      }
    }
  }
}, function(err, t) {
  // initialized and ready to go!
  document.getElementById('output').innerHTML = i18next.t('key');
});

Refer following links for detailed documentation, configuration options, methods and examples:

RateYo is a tiny and flexible jQuery star rating plugin that uses SVG to render rating, so no images are required.
Read the official RateYo Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<script src="jquery.rateyo.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.rateyo.min.css">

2. Binding to existing DOM element.

<div id="basic-ratings"></div>

3. Basic usage looks something like this:

var isRtl = $('html').attr('data-textdirection') === 'rtl' // RTL support
$('#basic-ratings').rateYo({
  rating: 3.6,
  rtl: isRtl // RTL support
});

Refer following links for detailed documentation, configuration options, methods and examples: