Introduction

Nilova – Astro Premium Admin & Dashboard Template for All Your Web Projects

Nilova – Astro Premium Admin & Dashboard Template that combines modern and minimal design with full flexibility and responsiveness. It’s crafted using Astro , SASS , and Bootstrap. Astro makes working with SCSS seamless by automatically compiling it into CSS during development and build. Whether you’re building a web application, admin dashboard, or project management platform, this template ensures your site stands out with ease.

Support and Updates:

When you purchase Nilova, you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.

Dependencies for Nilova

What Do You Get with the Nilova:

Nilova provides all necessary Astro, SCSS and js files, along with detailed Documentation to help you easily customize and implement the template.

All Astro Files
JS Files
SCSS Files
Documentation
StarterKit

Nilova Compatibility with Popular Browsers:

Nilova is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.

Firefox
Safari
Opera
Chrome
Edge

Getting Start Guide

Setting Up The Local Environment & Workspace

This comprehensive guide provides step-by-step instructions on how to set up your development environment for astro. It covers everything from the necessary prerequisites to installing the tool, creating an initial workspace, and setting up a starter app. You'll also learn how to run the app locally to test and verify your setup. By following this guide, you can ensure that your development environment is properly configured for astro, and you can get started with your project confidently and efficiently. Whether you're a beginner or an experienced developer, this guide is an essential resource for anyone looking to work with Astro.

To get started with a Astro application, there are some prerequisites that you need to have in place.

Prerequisites

To use the Astro Framework, you should be familiar with the following:

Astro
Bootstrap
Javascript

Knowledge of Astro and Javascript is helpful.

Installation Process

How to Run the Nilova Template:

Step 1:

Download the project, extract it, and navigate to the final template folder named Nilova Astro Final. Open the template to proceed.

Step 2:

Open your terminal or command prompt and run the following command to install the packages:

code

npm install

(Or)

code

yarn install

Step 3:

After the installation, run the project using the following command:

code

npm run dev

(Or)

code

yarn run dev

Once you serve your application by default it will take their default port using http://localhost:4321/

Note:

If your are using "npm install", You should need to delete the "yarn-lock file" from project root.

If your are using "yarn install", You should need to delete the "package-lock.json file" from project root.

To install the peer Depencies

In general, the npm i command is used to install all dependencies or devDependencies from a package. However, sometimes you may encounter errors while installing certain dependencies. In such cases, the --force argument can be used to force npm to install those dependencies.

Using the --force argument can be helpful when you need to install a specific dependency that is causing issues during installation. However, it should be used with caution, as it can potentially cause conflicts with other dependencies or lead to unexpected behavior. It's always a good idea to thoroughly test your application after using the --force argument to ensure that everything is working as expected.

code

npm install --force

Skipping the installation of peer dependencies can sometimes lead to issues with the functionality or compatibility of the package. To ensure that your package functions correctly, it's important to manually install any missing peer dependencies using the npm install command. When installing peer dependencies, you should also be aware of the potential for conflicts with other packages or dependencies. It's a good idea to carefully review the peer dependencies required by each package and ensure that they are compatible with other packages in your project. By taking these steps, you can avoid potential issues and ensure that your packages are installed and functioning correctly.

code

npm install--legacy-peer-deps

We have to use only one file example: (for yarn yarn-lock) & (for npm package-lock.json) file

For Build your Template

Build your application for host on server using below command:

code

npm run build

(Or)

code

yarn run build

"Similarly, the starter kit can be installed as well."

Installation Video

Video Link

Folder Structure

StaterKit Guide

Purpose of a starter kit

Introduction to the Astro Starter Kit Template:

The Astro template starterkit is a resource that helps developers kickstart their astro web development projects by providing a preconfigured and ready-to-use template. It aims to simplify the initial setup and provide a foundation for building astro-based websites or applications.

Purpose of the Astro Starter Kit Template:

The purpose of the Astro Starter Kit Template is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in Astro projects. Instead of starting from scratch, developers can leverage the starter kit to quickly set up a project structure that adheres to best practices and industry standards.

Benefits of Using the Astro Starter Kit Template:

The starter kit eliminates the need to set up the basic project structure manually. It provides a well-organized file and folder structure, including commonly used directories for separating code, templates, assets, and configuration files. This allows developers to focus more on implementing business logic rather than spending time on initial setup.
Before using the Astro Starter Kit Template, developers should have a basic understanding of Astro and web development concepts.

Starterkit Overview

You can use the Starterkit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Nilova-Astro have more than 180 components.

We have provided all the pre-build layouts like Sidemenu, Header, footer and blank pages etc in the Starterkit.

For further information or support regarding the template, please contact us using the provided link.

https://support.spruko.com/

Starterkit Folder Structure

Take a quick look at the folder structure of the "Starterkit."
Integration of your customized Astro pages becomes easy when using the "Starterkit."
The "Starterkit" provides all the layout components, related assets, and plugins.
To explore the contents of the "Starterkit," unzip the project folder received after purchase.

Main Layout

Basic Layout Structure

Main Layout structure of the Nilova template .Root:\src\layouts\Layout.astro

html


---
import Header from "../components/Header.astro";
import Sidebar from "../components/Sidebar.astro";
import Switcher from "../components/Switcher.astro";
import Loader from "../components/Loader.astro";
import Footer from "../components/Footer.astro";
import ResponsiveSearch from "../components/ResponsiveSearch.astro";
import CommonStyles from "../components/CommonStyles.astro";
import CommonScripts from "../components/CommonScripts.astro";
import favIcon from "../assets/images/brand-logos/favicon.ico";
const { Seo, bodyClass, pageHeader } = Astro.props;
---

<!doctype html>
<html
	lang="en"
	dir="ltr"
	data-nav-layout="vertical"
	data-theme-mode="light"
	data-header-styles="transparent"
	data-width="fullwidth"
	data-menu-styles="transparent"
	data-page-style="flat"
	data-toggled="close"
	data-vertical-style="doublemenu"
	data-toggled="double-menu-open"
>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href={favIcon} />
		<meta name="generator" content={Astro.generator} />
		<title>Nilova - {Seo};
		<CommonStyles />;
		
	</head>
	<body>
		<div class="progress-top-bar">
		<Loader />
		<div class="page">
			<Header />
			<Sidebar />
			<div class="main-content app-content">
            {
                pageHeader && (
                  <Pageheader
                    activepage={pageHeader.activepage}
                    title={pageHeader.title}
                    subtitle={pageHeader.subtitle}
                    currentpage={pageHeader.currentpage}
                  />
                )
            }       
				<div class="container-fluid page-container main-body-container">
					<slot />
				</div>
			</div>
			<Footer />
			<ResponsiveSearch />
		</div>
		<slot name="scripts" />
		<CommonScripts />
		<script>
			import "../scripts/js/custom-switcher.js";
		</script>
	</body>
</html>

Astro File Structure

General Astro file structure of the Nilova template .Root:src\pages\pages\empty.astro

Astro

    
---
import Layout from "../../layouts/Layout.astro";
import Pageheader from "../../components/Pageheader.astro";
---

<Layout Seo="Empty">
    <Pageheader title="Pages" currentpage="Empty" activepage="Empty" />
    
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    Empty Card
                </div>
            </div>
        </div>
    </div>
    
    <script>
        import "../../scripts/js/custom.js";
    </script>
    <script>
      requestAnimationFrame(() => {
        const loader = document.querySelector("#loader");
        if (loader) {
          loader.style.opacity = "0";
          setTimeout(() => loader.remove(), 300);
        }
      });
    </script>
</Layout>

Effortless SCSS Styling in Astro

Introduction :

Astro makes working with SCSS seamless by automatically compiling it into CSS during development and build. Developers can write SCSS directly inside a <style lang="scss"> block or import external .scss files—Astro handles the rest. Powered by Vite’s built-in Sass support, SCSS is transformed into optimized CSS and included in the final output without any manual setup. All that’s required is installing the sass package, and SCSS integration works instantly.

Prerequisites
Before proceeding, ensure that you have the following prerequisites:
Node.js installed on your system.

A project directory with SCSS files that you want to compile into CSS.

Installation :

Install the SASS package using npm (Node Package Manager) by running the following command:

code

npm install sass

This command will download and install the SASS package and its dependencies into your project.

FAQ'S

Step 1:

Go To style.scss (src/styles/scss/styles.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import in to styles.scss file

How to Select font Family

Step 2:

And paste Your Selected font-family in style.scss

Step 3:

And add the Your Selected font-family in _variables.scss(src/styles/scss/_variables.scss)

code

--default-font-family: "Space Grotesk", sans-serif;

By default menu icons are in the from remix icon if you want to change the icons please follow below steps

Step 1 :

To change Menu icons, open sidebar.tsx page Path: src\components\Sidebar.astro and go through app-sidebar section, in that section you will find svg tag, there you can replace previous icon with your icon. Example as shown in below

Before: (phosphor icons)

astro

After: (bootstrap Icons)

astro

Go To "src/assets/images/brand-logos" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

Step1:

To clear LocalStorage loading functions you need to remove LocalStorageBackup() function in custom-switcher.js src\scripts\js\custom-switcher.js as shown below

javascript

function localStorageBackup2() {}

Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear in custom-switcher.js src/scripts/js/custom-switcher.jsfile.Below are the some examples to find out.

javascript

  
localStorage.setItem( );
localStorage.removeItem( );
localStorage.getItem( )
localStorage.clear();
localStorageBackup();

Step1:

To remove switcher icons remove below code shown in header.astro src/components/Header.astro file

                                                                


  <li class="header-element">
        <!-- Start::header-link|switcher-icon -->
        <a href="javascript:void(0);" class="header-link switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas">
            <svg xmlns="http://www.w3.org/2000/svg" class="header-link-icon" viewBox="0 0 256 256">
        </a>
        <!-- End::header-link|switcher-icon -->
    </li>

Step2:

Remove the switcher component from the main layout follow the path Path: nilova-ts\src\layouts\Layout.astro


    ---                                                                
    import Switcher from "../components/Switcher.astro";
    ---
    
    <Switcher />

Step3:

Now remove the switcher component from the root folder, follow the path Switcher component src/components/Switcher.astro

Step1:

Open LandingLayout.astro component /src/layouts/LandingLayout.astro

To remove switcher section as shown below.


---
import LandingSwitcher from "../components/landingpage/LandingSwitcher.astro";
---
    
    <LandingSwitcher />

Step2:

Now remove the landingswitcher component from the root folder, follow the path \src\components\landingpage\LandingSwitcher.astro and

Please follow the below steps to change Primary Color

Step 1 :

To change Primary Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (src/styles/scss/_variables.scss )

How to Change Dark body Color?

Please follow the below steps to change Dark body Color

Step 1 :

Make sure the theme is set completely to dark mode by adding the following attributes to the html tag data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

Step 2 :

To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (src/styles/scss/_variables.scss )

Step 3 :

Also Change the following variable colors to the desired theme background accordingly in [data-theme-mode="dark"]

--light-rgb :
--form-control-bg :
--input-border :
--gray-3 :

Credit's

Icons Credit

Icons	References
Bootstrap Icons	https://icons.getbootstrap.com/
Boxicons	https://boxicons.com/
Remix Icons	https://remixicon.com/
Feather Icons	https://feathericons.com/
Tabler Icons	https://tabler-icons.io/
Line Awesome Icons	https://icons8.com/line-awesome
Phosphor Icons	https://phosphoricons.com/

Images Credit

Images	References
Vecteezy	https://www.vecteezy.com/
Iconscount	https://iconscout.com/
Unsplash	https://unsplash.com/
Png Tree	https://pngtree.com/
flaticon	https://www.flaticon.com/authors/flat-icons
freepik	https://www.freepik.com

Fonts Credit

Font	References
Google Fonts	https://fonts.google.com/

Sidemenu Icons

Icon	References
phosphor Icons	https://phosphoricons.com/

Switcher styles

You can change the Theme Styles & Colors by adding the attribute to the html tag in Layout.astro (Root:nilova-ts\src\layouts\Layout.astro)

astro

<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="transparent" data-width="fullwidth" data-menu-styles="transparent" data-page-style="flat" data-toggled="close"  data-vertical-style="doublemenu" data-toggled="double-menu-open">

Light:

html

data-theme-mode="light" data-header-styles="light" data-menu-styles="light"

Dark:

html

data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

LTR (Left to Right):

html

dir="ltr"

RTL (Right to Left):

html

dir="rtl"

Vertical:

html

data-nav-layout="vertical"

Horizontal:

html

data-nav-layout="horizontal" data-nav-style="menu-click"

Default:

Menu Click

data-nav-style="menu-click"

Menu Hover

html

data-nav-style="menu-hover"

Icon Click:

html

data-nav-style="icon-click"

Icon Hover:

html

data-nav-style="icon-hover"

Regular:

html

data-page-style="regular"

Classic:

html

data-page-style="classic"

Mordern:

html

data-page-style="modern"

Flat:

html

data-page-style="flat"

Default Width:

html

data-width="default"

Full Width:

html

data-width="full-width"

Boxed:

html

data-width="boxed"

Fixed:

html

data-menu-position="fixed"

Scrollable:

html

data-menu-position="scrollable"

Fixed:

html

data-header-position="fixed"

Scrollable:

html

data-header-position="scrollable"

Closed:

html

data-vertical-style="closed"

Icontext:

html

data-vertical-style="icontext"

Overlay:

html

data-vertical-style="overlay"

Detached:

html

data-vertical-style="detached"

Doublemenu:

html

data-vertical-style="doublemenu"

Enable:

html

loader="enable"

Disable:

html

loader="disable"

Light Style:

html

data-menu-styles="light"

Dark Style:

html

data-menu-styles="dark"

Color Style:

html

data-menu-styles="color"

Gradient Style:

html

data-menu-styles="gradient"

Transparent Style:

html

data-menu-styles="transparent"

Light Style:

html

data-header-styles="light"

Dark Style:

html

data-header-styles="dark"

Color Style:

html

data-header-styles="color"

Gradient Style:

html

data-header-styles="gradient"

Transparent Style:

html

data-header-styles="transparent"

Background Image Style-1:

html

data-bg-img="bgimg1"

Background Image Style-2:

html

data-bg-img="bgimg2"

Background Image Style-3:

html

data-bg-img="bgimg3"

Background Image Style-4:

html

data-bg-img="bgimg4"

Background Image Style-5:

html

data-bg-img="bgimg5"

Choices JS :

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

html

css

js

plugin link

https://choices-js.github.io/Choices/

Reference Link

https://www.npmjs.com/package/choices.js

Swiper JS :

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

html

css

js

Plugin Link

https://swiperjs.com/

Reference Link

https://www.npmjs.com/package/swiper

Sweet Alerts :

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

html

css

js

Plugin link

https://sweetalert2.github.io/

Reference Link

https://www.npmjs.com/package/sweetalert2

noui slider :

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

html

css

js

<!-- noUiSlider JS -->
import noUiSlider from "nouislider"

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

Plugin link

https://refreshless.com/nouislider/

Reference Link

https://www.npmjs.com/package/nouislider

FlatPickr :

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

html

css

js

Plugin link

https://flatpickr.js.org/examples/

Reference Link

https://www.npmjs.com/package/flatpickr

simonwep/pickr(ColorPicker) :

It is a modern javascript color picker..

html

css

js

Plugin link

https://simonwep.github.io/pickr/

Reference Link

https://www.npmjs.com/package/@simonwep/pickr

GLightbox (Gallery) : :

GLightbox is a modern javascript gallery plugin..

html

css

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;
    });

Plugin link

https://biati-digital.github.io/glightbox/

Reference Link

https://www.npmjs.com/package/glightbox

Full Calendar :

Full Calendar is a modern javascript calendar plugin..

html

js


   <!-- Moment JS -->
   import moment from "moment";

   <!-- Fullcalendar JS -->
  import { Calendar, Draggable } from "fullcalendar"

Plugin link

https://fullcalendar.io/

Reference Link

https://www.npmjs.com/package/fullcalendar

Leaflet Maps :

Leaflet Maps is a modern javascript maps plugin..

html

css

js

<!-- Leaflet Maps JS -->
<script src="../assets/libs/leaflet/leaflet.js"></script>

    /* 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);

Plugin link

https://leafletjs.com/

Reference Link

https://www.npmjs.com/package/leaflet

Jsvector Maps :

Jsvector Maps is a modern javascript maps plugin..

html

css

js

<!-- JSVector Maps JS -->
    <script src="../assets/libs/jsvectormap/js/jsvectormap.min.js"></script>

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

    /* basic vector map */
    var map = new jsVectorMap({
    selector: "#vector-map",
    map: "world_merc",
    });

Plugin link

https://jsvectorjs.com/

Reference Link

https://www.npmjs.com/package/jsvectormap

Gmaps.js :

gmaps is a modern javascript maps plugin..

html

js

 <!-- Google Maps API -->
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCW16SmpzDNLsrP-npQii6_8vBu_EJvEjA"></script>
<script src="../assets/libs/gmaps/gmaps.min.js"></script>

/* basic map */
var map = new GMaps({
    el: '#google-map',
    lat: -12.043333,
    lng: -77.028333
});

Plugin link

https://hpneo.dev/gmaps/

Reference Link

https://www.npmjs.com/package/gmaps

Simplebar Js :

Simplebar is a modern javascript scrollbar plugin..

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, obcaecati natus quidem optio a quasi quod consequuntur at sunt quos! Recusandae dicta facilis dolorem ad saepe officia earum, rem eum.

html

css

js


    import SimpleBar from "simplebar";
    var myElement = document.getElementById('scroll');
    new SimpleBar(myElement, { autoHide: true });

Plugin link

https://grsmto.github.io/simplebar/

Reference Link

https://www.npmjs.com/package/simplebar

Quill Editor:

Quill Editor is a modern javascript editor plugin..

Quill Snow is a free, open source Quill Editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

Write text select and edit with multiple options.
This is quill snow editor.
Easy to customize and flexible.

Quill officially supports a standard toolbar theme "Snow" and a floating tooltip theme "Bubble"

html

css

js

 <!-- Quill Editor JS -->
import Quill from "quill";

/* 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'
});

Plugin link

https://quilljs.com/

Reference Link

https://www.npmjs.com/package/quill

File Pond :

File Pond is a modern javascript file upload plugin..

html

css

js

<!-- Filepond JS -->

import * as FilePond from "filepond"
import FilePondPluginImagePreview from "filepond-plugin-image-preview"
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation"
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size'
import FilePondPluginFileEncode from "filepond-plugin-file-encode"
import FilePondPluginImageEdit from "filepond-plugin-image-edit"
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type"
import FilePondPluginImageCrop from "filepond-plugin-image-crop"
import FilePondPluginImageResize from "filepond-plugin-image-resize"
import FilePondPluginImageTransform from "filepond-plugin-image-transform"
import 'filepond/dist/filepond.min.css';


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

/* multiple upload */
const MultipleElement = document.querySelector('.multiple-filepond');
FilePond.create(MultipleElement,);

Plugin link

https://pqina.nl/filepond/

Reference Link

	https://www.npmjs.com/package/filepond

Drop Zone :

Drop Zone is a modern javascript file upload plugin..

html

css

js

 <!-- Dropzone JS -->
import Dropzone from "dropzone";

/* dropzone */
let myDropzone = new Dropzone(".dropzone");
    myDropzone.on("addedfile", file => {
});

Plugin link

https://www.dropzone.dev/

Reference Link

https://www.npmjs.com/package/dropzone

Grid.js Tables :

Grid.js is a modern javascript tables plugin..

html

css

js

 <!-- Grid JS -->
import { Grid } from "gridjs";

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

Plugin link

https://gridjs.io/

Reference Link

https://www.npmjs.com/package/gridjs

Rater Js :

Rater Js is a modern javascript ratings plugin..

html

js

<!-- Rater JS -->
<script src="../assets/libs/rater-js/index.js"></script>  

 /* Basic Rater */
        var starRating1 = raterJs({
            starSize: 24,
            element: document.querySelector("#rater-basic"),
            rateCallback: function rateCallback(rating, done) {
                this.setRating(rating);
                done();
            }
        });
        /* Basic Rater */

Plugin link

https://fredolss.github.io/rater-js/

Reference Link

https://www.npmjs.com/package/rater-js

tarekraafat/autocomplete :

tarekraafat/autocomplete Js is a modern javascript Advanced Forms plugin..

html

Css

js

<!-- Auto Complete JS -->
    <script src="../assets/libs/@tarekraafat/autocomplete.js/autoComplete.min.js"></script>

    /* Auto Complete Basic */
    const autoCompleteJS = new autoComplete({
        selector: "#autoComplete",
        placeHolder: "Search for Food & Drinks Combo",
        data: {
            src: ['Pizza, Soda',
                'Burger, Milkshake',
                'Tacos, Margarita',
                'Pasta, Red Wine',
                'Sushi, Green Tea',
                'Steak, Whiskey',
                'Salad, Sparkling Water',
                'Chicken Wings, Beer',
                'Fish and Chips, Lemonade',
                'Burrito, Iced Tea'],
            cache: true,
        },
        resultItem: {
            highlight: true
        },
        events: {
            input: {
                selection: (event) => {
                    const selection = event.detail.selection.value;
                    autoCompleteJS.input.value = selection;
                }
            }
        }
        });
            /* Auto Complete Basic */

Plugin link

https://smartscheduling.com/en/documentation/autocomplete

Reference Link

https://www.npmjs.com/package/autocompleter

yaireo/dragsort :

yaireo/dragsort Js is a modern javascript Advanced Forms plugin..

html

Css

js

 <!-- Tagify JS -->
<script src="../assets/libs/@yaireo/tagify/tagify.js"></script>

<!-- Dragsort JS -->
<script src="../assets/libs/@yaireo/dragsort/dragsort.js"></script>

Reference Link

https://www.npmjs.com/package/@yaireo/dragsort

yaireo/tagify :

yaireo/tagify Js is a modern javascript Animation plugin..

html

Css

js

<!-- tagify  JS -->
 <script src="../assets/libs/@yaireo/tagify/tagify.js"></script>

 /* Basic Tagify */
 // The DOM element you wish to replace with Tagify
 var inputtagify = document.querySelector('input[name=basic]');

 // initialize Tagify on the above input node reference
 new Tagify(inputtagify)
 /* Basic Tagify */

Reference Link

https://www.npmjs.com/package/@yaireo/tagify

Dual-listbox :

dual-listbox Js is a modern javascript Advanced Forms plugin..

html

Css

js

<!-- Dual ListBox JS -->
 <script src="../assets/libs/dual-listbox/dual-listbox.js"></script>

 /* Basic DualList */
    let dlb1 = new DualListbox('.select1');
/* Basic DualList */

Plugin Link

https://maykinmedia.github.io/dual-listbox/

Reference Link

https://www.npmjs.com/package/dual-listbox

fg-emoji-picker :

fg-emoji-picker Js is a modern javascript to pick the emoji plugin..

html

js

<!-- Emojji Picker JS  -->
 <script src="../assets/libs/fg-emoji-picker/fgEmojiPicker.js"></script>

 new FgEmojiPicker({
    trigger: [".emoji-picker"],
    insertInto: document.querySelector(".chat-message-space"),
    closeButton: true,
    position: ['top', 'right'],
    preFetch: true,
    dir:"../assets/libs/fg-emoji-picker/"
});

Plugin Link

https://nolanlawson.github.io/emoji-picker-element/

Reference Link

https://www.npmjs.com/package/emoji-picker-element

Intl-tel-input :

Intl-tel-input Js is a modern javascript is Advanced Form plugin...

html

Css

js

<!-- intl-tel-input JS -->
<script src="../assets/libs/intl-tel-input/build/js/intlTelInput.min.js"></script>

/* intl-tel-input Basic */
const input = document.querySelector("#phone");
window.intlTelInput(input, {
    utilsScript: "../assets/libs/intl-tel-input/build/js/utils.js"
});
/* intl-tel-input Basic */

Reference Link

https://www.npmjs.com/package/intl-tel-input

plyr :

plyr Js is a modern javascript is music playing plugin..

html

Css

js

<!-- Plyr JS -->
<script src="../assets/libs/plyr/plyr.min.js"></script>

const player = new Plyr('#player');

plugin Link

https://plyr.io/

Reference Link

	https://www.npmjs.com/package/plyr

Sortablejs :

sortablejs is a modern javascript is drag element in the list plugin..

Design logo for fictional company
Draft 300-word blog post
Create project plan with milestones
Develop sample interview questions
Generate customer feedback for product.
Write email template for newsletter.

html

js

<!-- Sortable  JS -->
<script src="../assets/libs/sortablejs/Sortable.min.js"></script>

/* simple sortable */
var simple = document.getElementById('simple-list');
new Sortable(simple, {
    animation: 150,
});
/* simple sortable */

plugin Link

https://sortablejs.github.io/Sortable/

Reference Link

https://www.npmjs.com/package/sortablejs

toastify :

toastify Js is a modern javascript is music playing plugin..

html

Css

js

<!-- Toastify JS -->
                            <script src="../assets/libs/toastify-js/src/toastify.js"></script>
                            
                            /* Toastify js */
                            document.getElementById("toast-button").addEventListener("click", function () {
                            Toastify({
                                text: "I'm a toast Message",
                                duration: 3000,
                                newWindow: true,
                                close: true,
                                gravity: "top", // `top` or `bottom`
                                positionRight: true, // `true` or `false`
                                backgroundColor: "linear-gradient(to right, var(--primary-color), rgb(215, 124, 247))"
                            }).showToast();
                            });

plugin Link

https://apvarun.github.io/toastify-js/

Reference Link

https://www.npmjs.com/package/toastify-js

Additional Plugins Included :

The following plugins have also been included, apart from the ones already listed in the above sections

Plugin	Version	URL
Bootstrap	v5.3.8	https://www.npmjs.com/package/bootstrap
apexcharts	v4.7.0	https://www.npmjs.com/package/apexcharts
chart.js	v4.5.1	https://www.npmjs.com/package/chart.js?activeTab=readme
Echarts	v6.1.0	https://www.npmjs.com/package/echarts
select2 dropdown	v8.4.4	https://www.npmjs.com/package/select2
shepherd.js	v15.2.2	https://www.npmjs.com/package/shepherd.js?activeTab=readme
vanilla-wizard	v0.0.7	https://www.npmjs.com/package/wizard

Switcher

Introduction

Nilova – Astro Premium Admin & Dashboard Template for All Your Web Projects

Support and Updates:

Dependencies for Nilova

What Do You Get with the Nilova:

Nilova Compatibility with Popular Browsers:

Getting Start Guide

Prerequisites

Installation Process

How to Run the Nilova Template:

Step 1:

Step 2:

Step 3:

Note:

To install the peer Depencies

For Build your Template

Installation Video

Folder Structure

Nilova-Astro -The main folder contain all astro, scss, images and other files

public / - This folder is used to serve static files directly at the root

images / -This folder images are plugin related images

menu-bg-images / -This folder images for css related images

src / - The folder containing all astro, scss, images and other files

assets/ - The folder containing images ,fonts ,audio and video files .

audio/ - The folder with audio files used in this template.

icons-fonts / - The folder with all icons used in this template.

bootstrap-icons/ - The folder contains all the bootstrap icons

boxicons/ - The folder contains all the boxicons icons

feather/ - The folder contains all the feather icons

line-awesome/ - The folder contains all the line-awesome icons.

remixicon/ - The folder contains all the remixicon icons.

tabler-icons/ -The folder contains all the tabler icons.

images/ - Folder contain all the template images.

video/ - The folder with video files used in this template.

components/ - Folder for common components of the template.

Landing Page / - This folder for landing page-related components.

CommonScripts / - This file for CommonScripts .

CommonStyles / - This file for CommonStyles.

Footer / - This file for Footer.

Header / - This file for Header .

Loader / - This file for Loader .

Pageheader / - This file for Pageheader .

ResponsiveSearch / - This file for ResponsiveSearch .

Sidebar / - This file for Sidebar .

Switcher / - This file for Switcher .

layouts/ - Folder containing Layouts-related components.

Authentication.astro/ - This file for Authentication layout.

LandingLayout.astro/ - This file for LandingLayout layout.

Layout.astro/ - This file for root Layout layout.

Pages/ - Folder containing layouts for the template.

applications / - This folder for applications-related files.

charts / - This folder for charts-related files.

dashboards / - This folder for dashboards-related files.

general / - This folder for general-related files.

icons / - This file for icons.

maps / - This folder for maps-related files.

pages / - This folder for pages-related files.

tables / - This folder for tables-related files.

widgets / - This file for widgets.

Scripts / - This folder for scripts-related files.

js/ - This folder for js files.

libs/ - This folder for all libs files.

shared/ - folord is header, sidebar, theme switcher, other reusable UI elements.

@spk-reusable-components / - This folder for authentication-related files.

application-reusable / - This folder for application reusable components.

dashboards-reusable / - This folder for dashboards reusable components.

reusable-pages / - This folder for pages reusable components.

reusable-widgets / - This folder for widgets reusable components.

data / - This folder for data-related files.

applications / - This folder for applications-related files.

dashboards / - This folder for dashboards-related files.

Icons / - This folder is for Icons-related files.

pages / -This folder is for charts-related files.

widgets / - This folder for widgets-related files.

styles / - This folder for Styles-related files.

scss / - This folder for Styles-related files.

backtotop / - The folder with all template.

footer / - The folder with all template.

header / - The folder with all template.