Introduction

Nilova – NextJs App-Router Typescript React Bootstrap Premium Admin & Dashboard Template for All Your Web Projects

Nilova – NextJs App-Router Typescript React Bootstrap Premium Admin & Dashboard Template that combines modern and minimal design with full flexibility and responsiveness. It’s crafted using NextJs , CSS3 , and React-Bootstrap offering seamless customization with SASS integration. 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 NextJs, CSS, SCSS, Tsx files, along with detailed Documentation to help you easily customize and implement the template.

All NextJs Files
CSS Files
SCSS Files
Tsx Files
Documentation

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 Nextjs tool. 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 Nextjs, 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 Nextjs.

Nilova - File Generate

Creating a Component

The easiest way to create a component is with the React CLI. You can also create a component manually.

Creating a component using the React CLI

To create a component using the React CLI:

From a terminal window, navigate to the directory containing your application
Run the generate-react-cli component <component-name> command, where <component-name> is the name of your new component.

code

 generate-react-cli component <component-name>

By default, this command creates the following:

A folder named after the component
A component file, <component-name>.component
A template file, <component-name>.component.tsx
A CSS file, <component-name>.component.css
A testing specification file, <component-name>.component.spec.ts

Where <component-name> is the name of your component.

Installation Process

How to Run the Nilova Template:

Step 1:

Download the project, extract it, and navigate to the final template folder named Nilova-Nextjs App Router TS 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:3000/

How to Convert SCSS to CSS:

If you need to change any styles, modify the SCSS files. To convert SCSS to CSS, run the following command:

code

npm run sass

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 NextJS Typescript Starter Kit Template:

The NextJS template starterkit is a resource that helps developers kickstart their NextJS 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 NextJS-based websites or applications.

Purpose of the NextJS Starter Kit Template:

The purpose of the NextJS Starter Kit Template is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in NextJS 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 NextJS 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 NextJS Starter Kit Template, developers should have a basic understanding of NextJS 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-nextJs Typescript have more than 150 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 NextJS 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:app\layout.tsx

html

                                            
    "use client"
    import React,{Fragments,useState } from 'react'
    import "./globals.scss";
    import { Provider } from 'react-redux'
    import { store } from '@/shared/redux/store';
    import { Initialload } from '@/shared/contextapi';
    import ThemeInitializer from '@/shared/utlites/ThemeInitializer';

    const RootLayout = ({ children, }: { children: ReactNode }) => {
        const [pageloading, setpageloading] = useState(false);
        return (
        <Fragment>
            <Provider store={store}>
            <Initialload.Provider value={{ pageloading, setpageloading }}>
            <ThemeInitializer/>
                {children}
            </Initialload.Provider>
            </Provider>
        </Fragment>
       )
    }

    export default RootLayout;

Nextjs File Structure

General Nextjs file structure of the Nilova template .Root:app/(components)/(content-layout)/pages/empty/page.tsx

    
    "use client"

    import Pageheader from "@/shared/layouts-components/pageheader/pageheader";
    import Seo from "@/shared/layouts-components/seo/seo";
    import React, { Fragment } from "react";
    import { Card, Col, Row } from "react-bootstrap";

    interface EmptyProps {}
    const Empty:React.FC<EmptyProps> = () => {
        return (
    <Fragment>
        <!-- Page Header -->
            <Seo title="Pages-Empty" />
            <Pageheader title="Pages"  currentpage="Empty" activepage="Empty" />
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
            <Row>
                <Col xl={12}>
                    <Card className="custom-card">
                        <Card.Body>
                            <h6 className="mb-0">Empty Card</h6>
                        </Card.Body>
                    </Card>
                </Col>
            </Row>
        <!-- End::row-1 -->
    </Fragment>
        )
    };

    export default Empty;

SideMenu Guide

Sidemenu Layout Structure

How to Add Menus to Sidebar.

In Next.js project, it can be easy to add menus to the sidebar by modifying the MenuItems array in the nav.tsx (shared\layouts-components\sidebar\nav.tsx) file. The sidebar will dynamically display the menus based on the contents of this array. below are the steps as follows

Steps:

Open nav.tsx File:

Open the nav.tsx (shared\layouts-components\sidebar\nav.tsx) file in Next.js project. This file contains the MenuItems array that defines the menus to be displayed in the sidebar.

To add the parent Menu Items:

Inside the MenuItems array, you can add your menu items using the following format:

Inside the MenuItems array, you can add custom nested menu items using the following format:

After adding your menu items, save the changes made to the nav.tsx (shared\layouts-components\sidebar\nav.tsx) file.

View Sidebar Changes:

The sidebar will now automatically display the added menu items based on the modifications you made in the MenuItems array.

To Remove the Menu Items:

To remove menu items that you don't need, you can simply delete the corresponding object from the MenuItems array.

By following these steps, you can easily customize and add menus to the sidebar of your Nextjs project. The menus will be dynamically generated based on the content of the MenuItems array in the nav.tsx file.

Routing

Next.js, a popular React framework, employs a simple and intuitive routing system that is based on the file structure of your project. This approach, known as file-based routing, offers developers a straightforward way to define routes and organize their application logic.

Note:

In a Next.js project, the app directory serves as the cornerstone of routing. Each file within this directory represents a unique route in the application.

app/page.tsx corresponds to the root route (/),  while app/dashboards/sales corresponds to /sales.

Basic Route

Following are the fundamental building blocks to creating a route.


        import React, { Fragment } from "react";
        import Link from 'next/link';
        import { useRouter } from "next/navigation";


        <ul>
            <li>
                <Link href="/dashboards/sales">Sales
                </Link>
            </li>
            <li>
                <Link href="/dashboards/analytics">Analytics
                </Link>
            </li>
        </ul>

Configure Link in Menu

To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link.


├── shared
├──layouts-components
    ├──sidebar
        nav.tsx
        export const MENUITEMS: any = [
        {
        menutitle: "MAIN",
        },
    
        {
        icon: DashboardIcon,
        badgetxt: ,
        title: "Dashboard",
        type: "sub",
        active: false,
        children: [
            {
            path: "/dashboards/sales",
            type: "link",
            active: false,
            selected: false,
            dirchange: false, 
            title: "Sales",
            },
            {
            path: "/dashboards/analytics",
            type: "link",
            active: false,
            selected: false,
            dirchange: false, 
            title: "Analytics",
            },
        ]
        }
      ]

SCSS to CSS

Introduction :

This documentation outlines the process of converting SCSS (Sassy CSS) files to standard CSS (Cascading Style Sheets) in a project's assets directory using the SASS package. SCSS is a preprocessor for CSS, and SASS is a popular choice for transforming SCSS into CSS efficiently. This guide provides step-by-step instructions on installing the SASS package, configuring it in your project, and converting SCSS files to CSS.

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.

Configuration :

To configure SASS for your project, follow these steps:

1. Open your project's package.json file. If you don't have one, you can create it by running npm init and following the prompts.
2. Inside the package.json file, locate the "scripts" section. If it doesn't exist, create one:
code
```
"scripts": {
 // ...existing scripts...
}
```
3. Add a script that specifies the compilation process from SCSS to CSS. You can name the script as you prefer, but for this example, we'll name it "sass." The script should look like this:
code
```
"scripts": {
"sass": "sass ./public/assets/scss:./public/assets/css/" }
```
In the script above, replace ./public/assets/scss with the path to your SCSS files and ./public/assets/css with the destination directory for your compiled CSS files.
4. Add a script that specifies the compilation compressed process from SCSS to CSS. You can name the script as you prefer, but for this example, we'll name it "sass-min." The script should look like this:
code
```
"scripts": {
    "sass-min": "sass ./public/assets/scss:./public/assets/css/ --style compressed"
  }
```
In the script above, replace ./public/assets/scss with the path to your SCSS files and ./public/assets/css with the destination directory for your compiled CSS files.
5. Save the package.json file.

Compiling SCSS to CSS :

With the SASS package and script configured, you can now compile your SCSS files to CSS with the following steps:

1. Open your terminal or command prompt.
2. Navigate to your project's root directory if you're not already there.
3. Execute the following command to run the "sass" script:
code
```
npm run sass
```
This command will initiate the SCSS to CSS compilation process using the SASS package.
4. Execute the following command to run the "sass-min" script:
code
```
npm run sass-min
```
This command will initiate the SCSS to CSS compilation compressed process using the SASS package.
5. Once the process is complete, the compiled CSS files will be generated in the specified destination directory (e.g., ./public/assets/css).

Conclusion :

You have successfully configured and used the SASS package to convert SCSS files to CSS in your project. This allows you to take advantage of SCSS's powerful features while ensuring that your web application uses standard CSS for styling.

Firebase Authentication Guide

Firebase SetUp

Step-1: Now run below commands inside our nextjs project to install firebase latest.

To remove firebase from the project make sure that you have to remove the firebase tab from the (app\page.tsx). change the key variable to 'next.js' Example : const [key, setKey] = useState('next.js') in the the (app\page.tsx).

Firebase installation process

FAQ'S

Step 1:

Go To style.scss (public/assets/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(public/assets/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: shared\layouts-components\sidebar\sidebar.tsx and go through app-sidebar section, in that section you will find icon tag, there you can replace previous icon with your icon. Example as shown in below

Go To "public/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.min.js shared\data\switcherdata\switcherdata.tsx as shown below

javascript

export const LocalStorageBackup {}

Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions like LocalStorageBackup in layout.tsx app/(components)layout.tsxfile.Below are the some examples to find out.

javascript

    
   useEffect(() => {
   if (typeof window !== 'undefined' && !theme.pageloading) {
       LocalStorageBackup(theme.setpageloading);
   }
     }, []);

Step1:

Open header.tsx component shared\layouts-components\header\header.tsx

To remove switcher section as shown below.

                                                                
<li className="header-element">
<Link scroll={false} href="#!" className="header-link switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas" onClick={handleShow} >
    <svg xmlns="http://www.w3.org/2000/svg" className="header-link-icon" viewBox="0 0 256 256">
    <rect width="256" height="256" fill="none" />
    <path d="M207.86,123.18l16.78-21a99.14,99.14,0,0,0-10.07-24.29l-26.7-3a81,81,0,0,0-6.81-6.81l-3-26.71a99.43,99.43,0,0,0-24.3-10l-21,16.77a81.59,81.59,0,0,0-9.64,0l-21-16.78A99.14,99.14,0,0,0,77.91,41.43l-3,26.7a81,81,0,0,0-6.81,6.81l-26.71,3a99.43,99.43,0,0,0-10,24.3l16.77,21a81.59,81.59,0,0,0,0,9.64l-16.78,21a99.14,99.14,0,0,0,10.07,24.29l26.7,3a81,81,0,0,0,6.81,6.81l3,26.71a99.43,99.43,0,0,0,24.3,10l21-16.77a81.59,81.59,0,0,0,9.64,0l21,16.78a99.14,99.14,0,0,0,24.29-10.07l3-26.7a81,81,0,0,0,6.81-6.81l26.71-3a99.43,99.43,0,0,0,10-24.3l-16.77-21A81.59,81.59,0,0,0,207.86,123.18ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z" opacity="0.2" />
    <circle cx="128" cy="128" r="40" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16" />
    <path d="M41.43,178.09A99.14,99.14,0,0,1,31.36,153.8l16.78-21a81.59,81.59,0,0,1,0-9.64l-16.77-21a99.43,99.43,0,0,1,10.05-24.3l26.71-3a81,81,0,0,1,6.81-6.81l3-26.7A99.14,99.14,0,0,1,102.2,31.36l21,16.78a81.59,81.59,0,0,1,9.64,0l21-16.77a99.43,99.43,0,0,1,24.3,10.05l3,26.71a81,81,0,0,1,6.81,6.81l26.7,3a99.14,99.14,0,0,1,10.07,24.29l-16.78,21a81.59,81.59,0,0,1,0,9.64l16.77,21a99.43,99.43,0,0,1-10,24.3l-26.71,3a81,81,0,0,1-6.81,6.81l-3,26.7a99.14,99.14,0,0,1-24.29,10.07l-21-16.78a81.59,81.59,0,0,1-9.64,0l-21,16.77a99.43,99.43,0,0,1-24.3-10l-3-26.71a81,81,0,0,1-6.81-6.81Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16" />
</svg>
    </Link>
    <Switcher show={show} handleClose={handleClose} />
</li>

Step2:

Remove the switcher component from the main layout follow the path Path: app/(components)/(content-layout)/layout.tsx


    import Switcher from "@/shared/layouts-components/switcher/switcher"
    
    <Switcher />

Step3:

Now remove the switcher component and switcherData file from the root folder, follow the path Switcher component shared/layouts-components/switcher/switcher.tsx and switcherdata file from /shared/data/switcherdata/switcherdata.tsx

Step1:

Open layout.tsx component /apps/components/authentication-layout/layout.tsx

To remove switcher section as shown below.


import LandingSwitcher from '@/shared/layouts-components/switcher/landing-switcher';
    
    <LandingSwitcher/>

Step2:

Remove the LandingSwitcher component from the main layout follow the path \app\(components)\(landing-layout)\layout.tsx


            import Landingswitcher from '@/shared/layouts-components/switcher/landing-switcher'
            
            <Landingswitcher />

Step3:

Now remove the landingswitcher component from the root folder, follow the path \shared\layouts-components\switcher\landing-switcher.tsx 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 (public/assets/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 (public/assets/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 mainhead.html (Root:apps/(components)/layout.tsx)

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

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"

Swiper JS :

React Swiper is a modern, feature-packed carousel component for React, offering smooth transitions, touch support, and advanced features like autoplay and lazy loading. It’s a flexible, performance-driven alternative to traditional carousels like Bootstrap.

nextjs

Nextjs

css

nextjs

Plugin Link

https://swiperjs.com/react

Reference Link

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

React-Apexcharts :

React-ApexCharts is a React wrapper for the popular ApexCharts library, enabling the easy creation of interactive, responsive charts. It offers a wide range of chart types and customization options with seamless React integration.

nextjs

Nextjs

nextjs

Plugin Link

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

Reference Link

https://apexcharts.com/react-chart-demos/

React Suneditor :

React SunEditor is a lightweight, customizable editor for React, providing rich text editingfeatures. It supports various formats, plugins, and is highly extensible for smooth integration into React applications.

nextjs

Nextjs

css

nextjs

Plugin Link

https://www.npmjs.com/package/suneditor-react

Reference Link

https://www.npmjs.com/package/suneditor-react

React DatePicker :

React Datepicker is a React wrapper for the Datepicker date picker library, offering a lightweight and customizable solution for selecting dates and times. It provides smooth integration, supports various date formats, and includes features like range selection, time picking, and more.

nextjs

Nextjs

css

Plugin Link

https://www.npmjs.com/package/react-datepicker

Reference Link

https://reactdatepicker.com/

React Select :

React Select is a flexible, customizable dropdown/select input component for React, offering features like multi-select, search, and async options. It provides an intuitive, user-friendly interface with advanced styling and accessibility support.

nextjs

Nextjs

nextjs

Plugin Link

https://www.npmjs.com/package/react-select

Reference Link

https://www.npmjs.com/package/suneditor-react

React GridJs :

React Grid.js is a React wrapper for the Grid.js table library, enabling the creation of interactive, customizable, and responsive data tables. It supports features like sorting, filtering, pagination, and inline editing, with a focus on performance and easy integration into React projects.

nextjs

Nextjs

nextjs

css

Plugin Link

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

Reference Link

https://gridjs.io/docs/examples/hello-world

React Toastify :

React Toastify is a lightweight and easy-to-use notification library for React that allows you to display customizable, non-blocking toast messages. It supports various notification types, automatic dismissal, and seamless integration, enhancing the user experience with minimal setup.

nextjs

Nextjs

Plugin Link

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

Reference Link

https://fkhadra.github.io/react-toastify/introduction/

React Ratings(MUI) :

React Material-UI Ratings is a component that integrates Material-UI's design system to create customizable, interactive rating systems in React applications. It allows users to easily select a rating through stars or other symbols, with built-in support for customization, accessibility, and styling.

nextjs

Nextjs

Plugin Link

https://www.npmjs.com/package/@mui/material

Reference Link

https://mui.com/material-ui/react-rating/

Basic Table : :

React Basic tables are simple, customizable table components for displaying structured data in a clean and responsive layout

nextjs

data

Alerts :

React Bootstrap Alerts are pre-styled, customizable alert components that integrate Bootstrap's alert system with React. They provide an easy way to display important messages or notifications, with built-in support for different styles (success, error, info, etc.), dismissible functionality, and seamless React integration.

nextjs

data

Buttons :

React Bootstrap Buttons are pre-styled, responsive button components that follow React Bootstrap’s design system, offering various styles, sizes, and colors. They provide an easy-to-use and customizable solution for creating interactive buttons in React applications, with support for icons, loading states, and more.

nextjs

data

Badges :

React Bootstrap Badges are small, customizable components used to display labels, notifications, or counters within your React application. They integrate seamlessly with React Bootstrap’s design system and support various styles, colors, and positions, making them ideal for highlighting important information or adding context to UI elements like buttons, links, or navigation items.

nextjs

data

Button Group :

React Bootstrap Button Group is a component that allows you to group multiple buttons together, providing a clean, unified look and facilitating interactions like toggling or switching between options. It integrates seamlessly with React Bootstrap's button styles and offers customization options for size, alignment, and behavior within React applications.

Preview
NextJs

nextjs

Cards :

React Bootstrap Cards are versatile, customizable components for displaying content in a flexible, structured layout. They integrate Bootstrap’s card system with React, allowing you to create various types of content containers with options for images, headers, footers, and more, making them ideal for building rich, responsive UI elements.

Preview
NextJs

nextjs

Breadcrumb :

React Bootstrap Breadcrumb is a navigation component that displays a series of links to help users understand their location within a hierarchical structure. It seamlessly integrates with React Bootstrap’s breadcrumb styling, offering customizable options for separators, active links, and responsive behavior in React applications.

Preview
NextJs

nextjs

Dropdown :

React Bootstrap Dropdown is a component that provides a simple way to create dropdown menus in React applications, following React Bootstrap's design conventions. It supports various options like single or multi-level menus, alignment, and customization of triggers (e.g., buttons or links), making it easy to build responsive, interactive dropdowns with minimal effort.

nextjs

Tooltips :

React Bootstrap Tooltips are small, customizable pop-up elements that provide additional information when users hover over or focus on an element. Built on React Bootstrap’s tooltip system, they offer easy integration in React applications, supporting various customization options like positioning, trigger events, and animations for a better user experience

nextjs

Popovers :

React Bootstrap Popovers are interactive components that display additional content or information when users click or hover over an element. Built on React Bootstrap’s popover system, they offer easy integration in React applications, with support for customizable content, placement, and triggers, allowing you to enhance the user interface with rich, contextual overlays.

nextjs

Progress :

React Bootstrap Progress is a component that allows you to display progress bars in React applications, indicating the completion status of tasks or operations. It integrates seamlessly with React Bootstrap’s progress bar styles, supporting features like custom labels, striped animations, and varying bar colors for easy customization and responsiveness.

nextjs

List Group :

React Bootstrap ListGroup is a component for creating lists of items with consistent styling and behavior, using Bootstrap's list group system. It supports features like custom item content, active states, badges, and links, making it easy to build interactive and organized lists in React applications with full customization options.

nextjs

Toast :

React Bootstrap Toast is a component for displaying lightweight, non-blocking notifications or messages in React applications. It integrates with React Bootstrap’s toast system, offering features like auto-dismiss, customizable timing, and different styling options for success, error, or info messages, making it easy to provide feedback to users in a clean and responsive way.

Preview
NextJs

nextjs

Accordions :

React Bootstrap Accordion is a component that allows you to display collapsible content panels in a stack, ideal for organizing large amounts of content in a compact, interactive layout. It integrates with React Bootstrap’s accordion system, supporting features like multiple or single panel expansion, custom styling, and smooth animations, making it easy to create dynamic, space-efficient UIs in React applications.

nextjs

Carousel :

React Bootstrap Carousel is a component for creating responsive, interactive image sliders or carousels in React applications. It integrates seamlessly with React Bootstrap’s carousel system, offering features like slide transitions, controls, indicators, and automatic cycling, allowing you to display a series of content in an engaging and user-friendly way.

nextjs

React-leaflet Maps :

Leaflet Maps is a modern javascript maps plugin..

Installing and usage

nextjs

css

Plugin link

https://react-leaflet.js.org/

Reference Link

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

Pigeon Maps :

Pigeon Maps is a modern javascript maps plugin..

Installing and usage

nextjs

Plugin link

https://pigeon-maps.js.org/

Reference Link

https://www.npmjs.com/package/pigeon-maps

Additional Plugins Included :

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

Plugin	Version	URL
Next	v16.2.6	https://nextjs.org/
React	v19.2.4	https://legacy.reactjs.org/
Typescript	v5	https://www.npmjs.com/package/typescript
Mui	v9.0.1	https://www.npmjs.com/package/@mui/material
Redux	v9.2.0	https://www.npmjs.com/package/redux
Firebase	v12.13.0	https://firebase.google.com/
rxjs	v7.8.2	https://www.npmjs.com/package/rxjs
React-chartjs-2	v5.3.1	https://www.npmjs.com/package/react-chartjs-2
Echarts-for-react	v3.0.6	https://www.npmjs.com/package/echarts-for-react
React-data-table-component	v7.7.1	https://www.npmjs.com/package/react-data-table-component
React-audio-player	v0.17.0	https://www.npmjs.com/package/react-audio-player
React-dragula	v1.1.17	https://www.npmjs.com/package/react-dragula
React-country-state-city	v1.1.12	https://www.npmjs.com/package/react-country-state-city
Shepherd.js	v15.2.2	https://www.npmjs.com/package/@reactour/tour
plyr-react	v6.0.0	https://www.npmjs.com/package/plyr-react
simplebar-react	v3.3.2	https://www.npmjs.com/package/simplebar-react
emoji-picker-react	v4.19.1	https://www.npmjs.com/package/emoji-picker-react
React-filepond	v7.1.3	https://pqina.nl/filepond/
React-listbox	v1.2.13	https://www.npmjs.com/package/react-listbox
React-range-slider-input	v3.3.5	https://www.npmjs.com/package/react-range-slider-input
React-color-palette	v7.3.1	https://www.npmjs.com/package/react-color-palette
React-range	v1.10.0	https://www.npmjs.com/package/react-range
Sweet alerts2	v11.26.24	https://sweetalert2.github.io/
Full Calendar	v6.1.20	https://www.npmjs.com/package/@fullcalendar/react
isotope-layout	v3.0.6	https://www.npmjs.com/package/isotope-layout
@react-input/mask	v2.0.4	https://www.npmjs.com/package/react-input-mask
react-countdown	v2.3.6	https://www.npmjs.com/package/react-countdown
react-countup	v6.5.3	https://www.npmjs.com/package/react-countup

Need Help ?

Switcher

Introduction

Nilova – NextJs App-Router Typescript React Bootstrap 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

Nilova - File Generate

Creating a Component

Creating a component using the React CLI

Installation Process

How to Run the Nilova Template:

Step 1:

Step 2:

Step 3:

How to Convert SCSS to CSS:

Note:

To install the peer Depencies

For Build your Template

Installation Video

Folder Structure

Nilova-Nextjs-Approuter-Ts -The main folder contain all tsx, scss, images and other files

app / - The folder containing all the NextJs files.

components/ - A grouping folder for four layouts. not a route itself

authentication-layout / - This folder for authentication-related files.

authentication/ - A grouping folder for four layouts. not a route itself

layout.tsx -This is authentication layout.

content-layout / - This folder for content-related files.

applications/ - A grouping folder for four layouts. not a route itself

layout.tsx -This is authentication layout.

Landing-layout / - This folder for content-related files.

Landing/ - A grouping folder for four layouts. not a route itself

layout.tsx -This is landing layout.

layout.tsx -The main layout of root layout,it's contain html and body tags

favicon.ico / - The esbuild configuration file for defining build settings

globals.scss / - The esbuild configuration file for defining build settings

layout.tsx / - The esbuild configuration file for defining build settings

page.tsx / - The esbuild configuration file for defining build settings

plugin.d.ts / - The esbuild configuration file for defining build settings

public / - The folder containing all the assets files.

assets/ - The folder containing the theme's assets.

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.

js/ - The folder contains all the template JavaScript files.

scss / -Folder contain all scss files including plugins .

bootstrap/ - The folder contains all the Bootstrap component files.

custom/ - The folder contains all the custom component files.

global/ - The folder contains all the global Styles files.

menu-styles/ - The folder contains all the menu layout files.

pages/ - The folder contains all the Pages component files..

Util/ - The folder contains all the utilite components files..

_switcher.scss - The file contains all the switcher component files.

_variables.scss - The file contains all the declared _variables.

icons.scss - The file which contains all the icons included.

styles.scss - The file which contains all the scss files included.

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

file.svg / - This file is file.svg icon

globe.svg / - This file is globe.svg icon

next.svg / - The esbuild configuration file for defining build settings

vercel.svg / - This file is vercel.svg icon

window.svg / - This file is window.svg icon

shared / - The folder containing all the shared files.

@spk-reusable-components/ - The folder containing the reusable files .

data/ - The folder containing the data files.

firebase/ - The folder containing firebase.

layouts-components/ - The folder containing the all layouts-components.

backtotop / - The folder with all backtotop in this template.

footer / - The folder with all footer in this template.

header / - The folder with all header in this template.

pageheader / - The folder with all pageheader in this template.

seo / - The folder with all seo in this template.