Used Plugins & Reference Links

All plugins runs through npm.

If you want new plugins : Install new plugin from npm then run gulp command.

Plugin Version URL
Tailwind CSS v3.4.1 https://tailwindcss.com/
Preline Js v2.0.3 https://preline.co/
Choices Js v10.2.0 https://www.npmjs.com/package/choices.js
Swiper v8.4.4 https://www.npmjs.com/package/swiper
Sweet alerts v11.4.37 https://www.npmjs.com/package/sweetalert2
nouislider v15.6.1 https://www.npmjs.com/package/nouislider
flatpickr v4.6.13 https://www.npmjs.com/package/flatpickr
@simonwep/pickr(ColorPicker) v1.9.0 https://www.npmjs.com/package/@simonwep/pickr
GLightbox(Gallery) v3.2.0 https://www.npmjs.com/package/glightbox
Full Calendar v5.11.5 https://www.npmjs.com/package/fullcalendar
Leaflet Maps v1.9.4 https://www.npmjs.com/package/leaflet
jsvectormap v1.4.5 https://www.npmjs.com/package/jsvectormap
gmaps.js v0.4.25 https://www.npmjs.com/package/gmaps
apexcharts v3.41.1 https://www.npmjs.com/package/apexcharts
chart.js v3.9.1 https://www.npmjs.com/package/chart.js?activeTab=readme
Echarts v5.3.3 https://www.npmjs.com/package/echarts
simplebar js v5.3.9 https://www.npmjs.com/package/simplebar
select2 dropdown v8.4.4 https://www.npmjs.com/package/select2
quill v1.3.7 https://www.npmjs.com/package/quill
filepond v4.30.4 https://www.npmjs.com/package/filepond
dropzone v6.0.0-beta.2 https://www.npmjs.com/package/dropzone
gridjs v6.0.6 https://www.npmjs.com/package/gridjs
rater-js v1.0.1 https://www.npmjs.com/package/rater-js
Choices JS :

Choices JS is very simple javascript plugin to style default select..

1. You need to add these files to make it work.
        
         <select class="form-select" multiple="" aria-label="multiple select example">
            <option selected="">Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        
        
        
        <!-- Choices Css -->
        <link rel="stylesheet" href="../assets/libs/choices.js/public/assets/styles/choices.min.css">
        
        
        
        <!-- Choices JS -->
        <script src="../assets/libs/choices.js/public/assets/scripts/choices.min.js">
Type URL
Plugin Link https://choices-js.github.io/Choices/
Swiper JS :

Swiper JS is very modern javascript plugin to replace bootstrap carousel..

1. You need to add these files to make basic swiper work.
        
         <div class="swiper swiper-basic">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../assets/images/media/media-27.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../assets/images/media/media-26.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../assets/images/media/media-25.jpg" alt=""></div>
            </div>
        </div>
        </select>
        
        
        
        <!-- Swiper Css -->
            <link rel="stylesheet" href="../assets/libs/swiper/swiper-bundle.min.css">
        
        
        
        <!-- Swiper JS -->
        <script src="../assets/libs/swiper/swiper-bundle.min.js">

        // deault swiper
        var swiper = new Swiper(".swiper-basic", {
            loop: true,
            autoplay: {
                delay: 1500,
                disableOnInteraction: false,
            }
        });
Type URL
Plugin Link https://swiperjs.com/
Sweet Alerts :

Sweet Alerts is a modern javascript plugin for alert messages..

1. You need to add these files to make basic alert work.
        
         <button class="ti-btn ti-btn-primary-full" id="basic-alert">Basic Alert</button>
        
        
        
            
            <link rel="stylesheet" href="../assets/libs/sweetalert2/sweetalert2.min.css">
        
        
        
        <!-- Sweetalerts JS -->
        <script src="../assets/libs/sweetalert2/sweetalert2.min.js">

        /* for basic sweet alert */
        document.getElementById('basic-alert').onclick = function () {
            Swal.fire('Hello this is Basic alert message')
        };
Type URL
Plugin Link https://sweetalert2.github.io/
noui slider :

noui slider is a modern javascript plugin for alert messages..

1. You need to add these files to make basic range slider work.
        
         <div id="slider"></div>
        
        
        
        <!-- noui Slider -->
            <link rel="stylesheet" href="../assets/libs/nouislider/nouislider.min.css">
        
        
        
         <!-- noUiSlider JS -->
        <script src="../assets/libs/nouislider/nouislider.min.js">
        

        /* default slider */
        var slider = document.getElementById('slider');
        noUiSlider.create(slider, {
            start: [30, 80],
            connect: true,
            range: {
                'min': 0,
                'max': 100
            }
        });
Type URL
Plugin Link https://refreshless.com/nouislider/
FlatPickr :

FlatPickr is a modern javascript plugin alternative for date and time pickers..

1. You need to add these files to make basic Flatpickr work.
        
         <div class="form-group">
            <div class="input-group">
                <div class="input-group-text text-textmuted"> <i class="ri-calendar-line"></i> </div>
                <input type="text" class="form-control" id="date" placeholder="Choose date">
            </div>
        </div>
        
        
        
        <!-- FlatPickr CSS -->
        <link rel="stylesheet" href="../assets/libs/flatpickr/flatpickr.min.css">
        
        
        
         <!-- Date & Time Picker JS -->
        <script src="../assets/libs/flatpickr/flatpickr.min.js">

        /* To choose date */
        flatpickr("#date", {});
Type URL
Plugin Link https://flatpickr.js.org/examples/
simonwep/pickr(ColorPicker) :

It is a modern javascript color picker..

1. You need to add below files to make classic color picker work.
        
          <div>
            <div class="theme-container"></div>
            <div class="pickr-container example-picker"></div>
        </div>
        
        
        
        <link rel="stylesheet" href="../assets/libs/@simonwep/pickr/themes/classic.min.css">
        
        
        
         <!-- Color Picker JS -->
        <script src="../assets/libs/@simonwep/pickr/pickr.es5.min.js">

        const pickrContainer = document.querySelector('.pickr-container');
        const themeContainer = document.querySelector('.theme-container');

        /* classic */
        const themes = [
            [
                'classic',
                {
                    swatches: [
                        'rgba(244, 67, 54, 1)',
                        'rgba(233, 30, 99, 0.95)',
                        'rgba(156, 39, 176, 0.9)',
                        'rgba(103, 58, 183, 0.85)',
                        'rgba(63, 81, 181, 0.8)',
                        'rgba(33, 150, 243, 0.75)',
                        'rgba(3, 169, 244, 0.7)',
                        'rgba(0, 188, 212, 0.7)',
                        'rgba(0, 150, 136, 0.75)',
                        'rgba(76, 175, 80, 0.8)',
                        'rgba(139, 195, 74, 0.85)',
                        'rgba(205, 220, 57, 0.9)',
                        'rgba(255, 235, 59, 0.95)',
                        'rgba(255, 193, 7, 1)'
                    ],

                    components: {
                        preview: true,
                        opacity: true,
                        hue: true,

                        interaction: {
                            hex: true,
                            rgba: true,
                            hsva: true,
                            input: true,
                            clear: true,
                            save: true
                        }
                    }
                }
            ],
        ];

        const buttons = [];
        let pickr = null;

        for (const [theme, config] of themes) {
            const button = document.createElement('button');
            button.innerHTML = theme;
            buttons.push(button);

            button.addEventListener('click', () => {
                const el = document.createElement('p');
                pickrContainer.appendChild(el);

                // Delete previous instance
                if (pickr) {
                    pickr.destroyAndRemove();
                }

                // Apply active class
                for (const btn of buttons) {
                    btn.classList[btn === button ? 'add' : 'remove']('active');
                }

                // Create fresh instance
                pickr = new Pickr(Object.assign({
                    el,
                    theme,
                    default: '#6c5ffc'
                }, config));

                // Set events
                pickr.on('init', instance => {
                    // console.log('Event: "init"', instance);
                }).on('hide', instance => {
                    // console.log('Event: "hide"', instance);
                }).on('show', (color, instance) => {
                    // console.log('Event: "show"', color, instance);
                }).on('save', (color, instance) => {
                    // console.log('Event: "save"', color, instance);
                }).on('clear', instance => {
                    // console.log('Event: "clear"', instance);
                }).on('change', (color, source, instance) => {
                    // console.log('Event: "change"', color, source, instance);
                }).on('changestop', (source, instance) => {
                    // console.log('Event: "changestop"', source, instance);
                }).on('cancel', instance => {
                    // console.log('cancel', pickr.getColor().toRGBA().toString(0));
                }).on('swatchselect', (color, instance) => {
                    // console.log('Event: "swatchselect"', color, instance);
                });
            });

            themeContainer.appendChild(button);
        }

        buttons[0].click();
Type URL
Plugin Link https://simonwep.github.io/pickr/
GLightbox (Gallery) :

GLightbox is a modern javascript gallery plugin..

1. You need to add these files to make gallery work.
        
           <div class="inner">
            <a href="../assets/img/gallery/1.jpg" class="gallery">
                <img src="../assets/img/gallery/1.jpg" alt="image" class="w-full" >
                <div class="image-overlay">
                    <h5 class="image-caption">Image-1</h5>
                </div>
            </a>
        </div>
        
        
        
        <!-- GLightbox CSS -->
            <link rel="stylesheet" href="../assets/libs/glightbox/css/glightbox.min.css">
        
        
        
         <!-- Gallery JS -->
        <script src="../assets/libs/glightbox/js/glightbox.min.js">

        var lightboxVideo = GLightbox({
            selector: '.glightbox'
        });
        lightboxVideo.on('slide_changed', ({ prev, current }) => {
            console.log('Prev slide', prev);
            console.log('Current slide', current);

            const { slideIndex, slideNode, slideConfig, player } = current;
        });
Type URL
Plugin Link https://biati-digital.github.io/glightbox/
Full Calendar :

Full Calendar is a modern javascript calendar plugin..

1. You need to add these files to make full calendar work.
        
         <div id='calendar2'></div>
        
        
        
        <!-- Full Calendar CSS -->
            <link rel="stylesheet" href="../assets/libs/fullcalendar/main.min.css">
        
        
        
         <!-- Moment JS -->
        <script src="../assets/libs/moment/moment.js">

        <!-- Fullcalendar JS -->
        <script src="../assets/libs/fullcalendar/main.min.js">
        <script src="../assets/js/fullcalendar.js">
Type URL
Plugin Link https://fullcalendar.io/
Leaflet Maps :

Leaflet Maps is a modern javascript maps plugin..

1. You need to add these files to make leaflet maps work.
        
         <div id="map"></div>
        
        
        
        <!-- Leaflet Maps CSS -->
            <link rel="stylesheet" href="../assets/libs/leaflet/leaflet.css">
        
        
        
         <!-- Leaflet Maps JS -->
        <script src="../assets/libs/leaflet/leaflet.js">

        /* default map */
        var map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '© OpenStreetMap'
        }).addTo(map);
Type URL
Plugin Link https://leafletjs.com/
Jsvector Maps :

Jsvector Maps is a modern javascript maps plugin..

1. You need to add these files to make Jsvector maps work.
        
         <div id="vector-map"></div>
        
        
        
        <!-- Jsvector Maps -->
            <link rel="stylesheet" href="../assets/libs/jsvectormap/css/jsvectormap.min.css">
        
        
        
        <!-- JSVector Maps JS -->
        <script src="../assets/libs/jsvectormap/js/jsvectormap.min.js">

        <!-- JSVector Maps MapsJS -->
        <script src="../assets/libs/jsvectormap/maps/world-merc.js">

        /* basic vector map */
        var map = new jsVectorMap({
            selector: "#vector-map",
            map: "world_merc",
        });
Type URL
Plugin Link https://jvm-docs.vercel.app/
gmaps.js :

gmaps is a modern javascript maps plugin..

1. You need to add these files to make gmaps work.
        
         <div id="google-map"></div>
        
        
        
        <!-- Google Maps API -->
        <script src="https://maps.google.com/maps/api/js?key=AIzaSyCW16SmpzDNLsrP-npQii6_8vBu_EJvEjA">

        
        

        /* basic map */
        var map = new GMaps({
            el: '#google-map',
            lat: -12.043333,
            lng: -77.028333
        });
Type URL
Plugin Link https://grsmto.github.io/simplebar/
Simplebar Js :

Simplebar is a modern javascript scrollbar plugin..

1. You need to add these files to make simplebar work.
        
         <div id="scroll"></div>
        
        
        
        <!-- Simplebar Css -->
        <link href="../assets/libs/simplebar/simplebar.min.css" rel="stylesheet" >

        #scroll {
            max-height: 10rem
        }

        Note: Max height should be given to the id to which scroll has to be applied
        
        
        
        
        var myElement = document.getElementById('scroll');
        new SimpleBar(myElement, { autoHide: true });
Type URL
Plugin Link https://hpneo.dev/gmaps/
Cleave.js :

Cleave.js is a modern javascript date & time format plugin..

1. You need to add these files to make cleave.js work.
        
         <input class="form-control date-format" placeholder="DD-MM-YYYY">
        
        
        
        <!-- Cleave.js -->
        <script src="../assets/libs/cleave.js/cleave.min.js">

        /* date format */
        var dt1 = new Cleave('.date-format', {
            date: true,
            delimiter: '-',
            datePattern: ['d', 'm', 'Y']
        });
Type URL
Plugin Link https://nosir.github.io/cleave.js/
Quill Editor :

Quill Editor is a modern javascript editor plugin..

1. You need to add these files to make quill editor work.
        
           
            <div id="editor">
              <h4><b class="ql-size-large">Quill Snow"</b> is a free, open source <a
                      href="https://github.com/quilljs/quill/" target="_blank">Quill Editor</a>
                  built for the modern web. With its <a href="https://quilljs.com/docs/modules/"
                      target="_blank">modular architecture</a> and expressive API, it is
                  completely customizable to fit any need.</h4>
              <p><br></p>
              <ol>
                  <li class="ql-size-normal">Write text select and edit with multiple options.
                  </li>
                  <li class="">This is quill snow editor.</li>
                  <li class="">Easy to customize and flexible.</li>
              </ol>
              <p><br></p>
              <h4>Quill officially supports a standard toolbar theme <a
                      href="https://github.com/quilljs/quill/" target="_blank">"Snow"</a> and a
                  floating tooltip theme <a href="https://github.com/quilljs/quill/"
                      target="_blank">"Bubble"</a></h4>
          </div>
        
        
        
        <link rel="stylesheet" href="../assets/libs/quill/quill.snow.css">
        
        
        
        
        <!-- Quill Editor JS -->
        <script src="../assets/libs/quill/quill.min.js">

        /* quill snow editor */
        var toolbarOptions = [
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'font': [] }],
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'align': [] }],

            ['image', 'video'],
            ['clean']                                         // remove formatting button
        ];
        var quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });
Type URL
Plugin Link https://quilljs.com/
File Pond :

File Pond is a modern javascript file upload plugin..

1. You need to add these files to make file pond work.
        
         <input type="file" class="multiple-filepond" name="filepond" multiple data-allow-reorder="true" data-max-file-size="3MB" data-max-files="6">
        
        
        
        <link rel="stylesheet" href="../assets/libs/filepond/filepond.min.css">
        <link rel="stylesheet" href="../assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css">
        <link rel="stylesheet" href="../assets/libs/filepond-plugin-image-edit/filepond-plugin-image-edit.min.css">
        
        
        
        
        <!-- Filepond JS -->
        <script src="../assets/libs/filepond/filepond.min.js">
        <script src="../assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js">
        <script src="../assets/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js">
        <script src="../assets/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js">
        <script src="../assets/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js">
        <script src="../assets/libs/filepond-plugin-image-edit/filepond-plugin-image-edit.min.js">
        <script src="../assets/libs/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js">
        <script src="../assets/libs/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js">
        <script src="../assets/libs/filepond-plugin-image-crop/filepond-plugin-image-crop.min.js">
        <script src="../assets/libs/filepond-plugin-image-resize/filepond-plugin-image-resize.min.js">
        <script src="../assets/libs/filepond-plugin-image-transform/filepond-plugin-image-transform.min.js">

        /* filepond */
        FilePond.registerPlugin(
            FilePondPluginImagePreview,
            FilePondPluginImageExifOrientation,
            FilePondPluginFileValidateSize,
            FilePondPluginFileEncode,
            FilePondPluginImageEdit,
            FilePondPluginFileValidateType,
            FilePondPluginImageCrop,
            FilePondPluginImageResize,
            FilePondPluginImageTransform
        );

        /* multiple upload */
        const MultipleElement = document.querySelector('.multiple-filepond');
        FilePond.create(MultipleElement,);
Type URL
Plugin Link https://pqina.nl/filepond/
Drop Zone :

Drop Zone is a modern javascript file upload plugin..

1. You need to add these files to make drop zone work.
        
         <form data-single="true" method="post" action="https://httpbin.org/post" class="dropzone"></form>
        
        
        
        <link rel="stylesheet" href="../assets/libs/dropzone/dropzone.css">
        
        
        
        
        <!-- Dropzone JS -->
        <script src="../assets/libs/dropzone/dropzone-min.js">

        /* dropzone */
        let myDropzone = new Dropzone(".dropzone");
            myDropzone.on("addedfile", file => {
        });
Type URL
Plugin Link https://www.dropzone.dev/
Grid.js Tables :

Grid.js is a modern javascript tables plugin..

1. You need to add these files to make grid.js work.
        
         <div id="grid-example1"></div>
        
        
        
        <link rel="stylesheet" href="../assets/libs/gridjs/theme/mermaid.min.css">
        
        
        
        
        <!-- Grid JS -->
        <script src="../assets/libs/gridjs/gridjs.umd.js">

        // basic example
        new gridjs.Grid({
            resizable: true,
            columns: [{
                name: "Date",
                width: "150px",
            }, {
                name: "Name",
                width: "150px",
            }, {
                name: "Email",
                width: "200px",
            }, {
                name: "ID",
                width: "150px",
            }, {
                name: "Price",
                width: "100px",
            }, {
                name: "Quantity",
                width: "100px",
            }, {
                name: "Total",
                width: "100px",
            }],
            data: [
                ["24-10-2022 12:47", "john", "john123@gmail.com", "#12012", "$1799", "1", "$1799"],
                ["12-09-2022 04:24", "mark", "markzenner23@gmail.com", "#12013", "$2479", "2", "$4958"],
                ["18-11-2022 18:43", "eoin", "eoin1992@gmail.com", "#12014", "$769", "1", "$769"],
                ["10-09-2022 10:35", "sarahcdd", "sarahcdd129@gmail.com", "#12015", "$1299", "3", "$3997"],
                ["27-10-2022 09:55", "afshin", "afshin@example.com", "#12016", "$1449", "1", "$1449"]
            ],
        }).render(document.getElementById("grid-example1"));
        // basic example
Type URL
Plugin Link https://gridjs.io/
Rater Js :

Rater Js is a modern javascript ratings plugin..

1. You need to add these files to make Rater Js work.
        
         <div id="rater-basic"></div>
        
        
        
        <!-- Rater JS -->
            <script src="../assets/libs/rater-js/index.js">

            /* Basic Rater */
            var starRating1 = raterJs({
                starSize: 24,
                element: document.querySelector("#rater-basic"),
                rateCallback: function rateCallback(rating, done) {
                    this.setRating(rating);
                    done();
                }
            });
            /* Basic Rater */
Type URL
Plugin Link https://fredolss.github.io/rater-js/