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
Nextjs 13.1.6 https://www.npmjs.com/package/next
React v18.2.0 https://legacy.reactjs.org/
vite v4.5.0 https://vitejs.dev/guide/
Typescript v5.3 https://www.typescriptlang.org/
react-helmet-async v1.3.0 https://www.npmjs.com/package/react-helmet-async
ReactBootstrap v2.9.1 https://react-bootstrap.netlify.app/
firebase v10.5.2 https://firebase.google.com/
Swiper v11.0.3 https://swiperjs.com/get-started
Sweet alerts2 v11.9.0 https://sweetalert2.github.io/
rc-slider v10.4.0 https://www.npmjs.com/package/rc-slider
@simonwep/pickr(ColorPicker) v1.9.0 https://www.npmjs.com/package/@simonwep/pickr
yet-another-react-lightbox v3.14.0 https://yet-another-react-lightbox.com/
Full Calendar v6.1.9 https://fullcalendar.io/
react-leaflet v4.2.1 https://react-leaflet.js.org/
react-apexcharts v1.4.1 https://apexcharts.com/react-chart-demos/
react-chartjs-2 v5.2.0 https://www.npmjs.com/package/react-chartjs-2
echarts-for-react v3.0.2 https://www.npmjs.com/package/echarts-for-react
perfect-scrollbar v1.5.8 https://www.npmjs.com/package/react-perfect-scrollbar
react-quill v2.0.0 https://www.npmjs.com/package/react-quill
react-filepond v7.1.2 https://pqina.nl/filepond/
react-dropzone-uploader v2.11.0 https://www.npmjs.com/package/react-dropzone-uploader
react-redux v8.1.3 https://www.npmjs.com/package/react-redux
gridjs-react v6.0.1 https://www.npmjs.com/package/gridjs-react
react-countdown v2.3.5 https://www.npmjs.com/package/react-countdown
react-tabulator v0.19.0 https://www.npmjs.com/package/react-tabulator
react-range-slider-input v3.0.7 https://www.npmjs.com/package/react-range-slider-input
react-range v1.8.14 https://www.npmjs.com/package/react-range
suneditor-react v3.6.1 https://www.npmjs.com/package/suneditor-react
react-tag-input v6.8.1 https://www.npmjs.com/package/react-tag-input
react-multi-select-component v4.3.4 https://www.npmjs.com/package/react-multi-select-component
react-datepicker v4.21.0 https://www.npmjs.com/package/react-datepicker
react-countup v6.5.0 https://www.npmjs.com/package/react-countup
react-input-mask v2.0.4 https://www.npmjs.com/package/react-input-mask
react-number-format v5.3.1 https://www.npmjs.com/package/react-number-format
react-select v5.7.7 https://www.npmjs.com/package/react-select
react-simple-maps v3.0.0 https://www.npmjs.com/package/react-simple-maps
rodal v2.1.0 https://www.npmjs.com/package/rodal
react-scrollbars-custom v4.1.1 https://www.npmjs.com/package/react-scrollbars-custom
Choices JS :

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

1. You need to add these files to make it work.
        
        
        
        
        
        
        
        
        
        
        
        
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.
        
        
        
        
        
        
        
        
        
        

        // 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.
        
        
        
        
        
        
        
        
        
        

        /* 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.
        
        
        
        
        
        
        
        
        
        
        

        /* 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.
        
        
        
        
        
        
        
        
        
        

        /* 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.
        
        
        
        
        
        
        
        
        
        

        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.
        
        
        
        
        
        
        
        
        
        

        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.
        
        
        
        
        
        
        
        
        
        
        
        
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.
        
        
        
        
        
        
        
        
        
        
        
        
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.
        
        
        
        
        
        
        
        
        
        
        
        
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.
        
        
        
        
        
        

        
        
        
        
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.
        
        
        
        
        
        
        
        
        
        
        
        
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.
        
        
        
        
        
        
        
        
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.
        
        
        
        
        
        
        
        
        
        
        
        
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.
        
        
        
        
        
        
        
        
        
        
        
        
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.
        
        
        
        
        
        
        
        
        
        

        /* 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.
        
        
        
        
        
        
        
        
        
        

        // 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.
        
        
        
        
        
        
        
        
Type URL
Plugin Link https://fredolss.github.io/rater-js/