Plugins

Power packed by awesome Plugins

Template power packed by awesome plugins


Awesome Plugins
  • Apex Charts

    To use apex charts in your application, include the following css and script files in HTML page.

    Vendor path
                                
        <!-- Styles -->
        <link href="node_modules/apexcharts/dist/apexcharts.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/apexcharts/dist/apexcharts.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Bootstrap 4

    To use bootstrap in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
                                
                            
  • Bootstrap Color Picker

    To use bootstrap color picker in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Bootstrap Date Picker

    To use bootstrap date picker in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Bootstrap Date Range Picker

    To use bootstrap date picker in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/bootstrap-daterangepicker/daterangepicker.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Bootstrap Select Picker

    To use bootstrap select picker in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Bootstrap Session Timeout

    To use bootstrap session timeout in your application, include the following script file in HTML page.

    Vendor path
                                
        <!-- Script -->
        <script src="vendors/bootstrap-session-timeout/bootstrap-session-timeout.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
                                
                            
  • Bootstrap Time Picker

    To use bootstrap time picker in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/bootstrap-timepicker/dist/css/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/bootstrap-timepicker/dist/js/bootstrap-timepicker.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Chart js

    To use chart js in your application, include the following script files in HTML page.

    Node module path
                                
        <!-- Script -->
        <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Data Tables

    To use data tables in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/datatables.net/js/jquery.dataTables.min.js"></script">
        <script src="node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/vendors/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/vendors/custom/datatables/datatables.bundle.js"></script">
                                
                            
  • Dropify

    To use dropify in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/dropify/dist/css/dropify.min.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/dropify/dist/css/dropify.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Font Awesome

    To use font awesome in your application, include the following css file in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"/>
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
                                
                            
  • Full Calendar

    To use full calendar in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/fullcalendar/dist/fullcalendar.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Ionicons

    To use ionicons in your application, include the following css file in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/ionicons/dist/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
                                
                            
  • Jquery

    To use jquery in your application, include the following script file in HTML page.

    Node module path
                                
        <!-- Script -->
        <script src="node_modules/jquery/dist/jquery.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
                                
                            
  • Jquery Cookies

    To use jquery cookies in your application, include the following script file in HTML page.

    Node module path
                                
        <!-- Script -->
        <script src="node_modules/jquery.cookie/jquery.cookie.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
                                
                            
  • Jquery Form Validation

    To use jquery form validation in your application, include the following script files in HTML page.

    Node module path
                                
        <!-- Script -->
        <script src="node_modules/jquery-validation/dist/jquery.validate.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Jquery Sparkline

    To use jquery sparkline in your application, include the following script files in HTML page.

    Vendor path
                                
        <!-- Script -->
        <script src="node_modules/jquery-sparkline/jquery.sparkline.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Jquery Steps

    To use jquery steps in your application, include the following script files in HTML page.

    Node module path
                                
        <!-- Script -->
        <script src="node_modules/jquery-steps/build/jquery.steps.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • jVector Map

    To use jvector map in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/jvectormap/jquery-jvectormap.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/jvectormap/jquery-jvectormap.min.js"></script">
        <script src="node_modules/jvectormap/lib/jquery-mousewheel.js"></script">
        <script src="node_modules/jvectormap/tests/assets/jquery-jvectormap-world-mill-en.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/vendors/custom/jvectormap/jvectormap.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/vendors/custom/jvectormap/jvectormap.bundle.js"></script">
                                
                            
  • Line Awesome

    To use line awesome in your application, include the following css file in HTML page.

    Vendor path
                                
        <!-- Styles -->
        <link href="src/vendors/line-awesome/css/line-awesome.min.css" rel="stylesheet" type="text/css"/>
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
                                
                            
  • Material Design Icons

    To use material design icons in your application, include the following css file in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet" type="text/css"/>
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
                                
                            
  • Moment js

    To use moment js in your application, include the following script file in HTML page.

    Node module path
                                
        <!-- Script -->
        <script src="node_modules/moment/min/moment.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
                                
                            
  • No UI Slider

    To use no ui slider in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/nouislider/distribute/nouislider.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/nouislider/distribute/nouislider.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Owl Carousel

    To use owl carousel in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/owl.carousel/dist/assets/owl.carousel.css" rel="stylesheet" type="text/css"/>
        <link href="node_modules/owl.carousel/dist/assets/owl.theme.default.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/owl.carousel/dist/owl.carousel.js"></script">
        <script src="node_modules/owl.carousel/dist/owl.carousel.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Perfect Scroll

    To use perfect scroll in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Select2

    To use select2 in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/select2/dist/css/select2.min.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/select2/dist/js/select2.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Summernote

    To use summernote in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/summernote/dist/summernote-lite.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/summernote/dist/summernote-lite.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Sweet Alert2

    To use sweet alert2 in your application, include the following script files in HTML page.

    Node module path
                                
        <!-- Script -->
        <script src="node_modules/sweetalert2/dist/sweetalert2.all.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Themfy Icons

    To use themfy icons in your application, include the following css file in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/ti-icons/css/themify-icons.css" rel="stylesheet" type="text/css"/>
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
                                
                            
  • Toastr

    To use toastr in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/toastr/build/toastr.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/toastr/build/toastr.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Trumbowyg

    To use trumbowyg in your application, include the following css and script files in HTML page.

    Node module path
                                
        <!-- Styles -->
        <link href="node_modules/trumbowyg/dist/ui/trumbowyg.min.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="node_modules/trumbowyg/dist/trumbowyg.min.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Styles -->
        <link href="dist/assets/css/vendors.bundle.css" rel="stylesheet" type="text/css"/>
        <link href="dist/assets/css/scripts.bundle.css" rel="stylesheet" type="text/css"/>
    
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">
        <script src="dist/assets/js/script.bundle.js"></script">
                                
                            
  • Wnumb

    To use wnumb in your application, include the following script file in HTML page.

    Node module path
                                
        <!-- Script -->
        <script src="node_modules/wnumb/wNumb.js"></script">
                                
                            

    OR
    Dist bundle path
                                
        <!-- Script -->
        <script src="dist/assets/js/vendors.bundle.js"></script">