Introduction

Nilova – Inertia, React, and Laravel Premium Admin & Dashboard Template for All Your Web Projects

Nilova – Inertia, React, and Laravel Premium Admin & Dashboard Template that combines modern and minimal design with full flexibility and responsiveness. It’s crafted using React , Inertia.js , Laravel , 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 PHP,React, CSS, SCSS, Ts files, along with detailed Documentation to help you easily customize and implement the template.

  • PHP Files
  • React Files
  • CSS Files
  • SCSS Files
  • Tsx 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 Vite using the React,Laravel 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 Vite and React, 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 Vite and React.

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

Prerequisites
For installation and setup all prerequisites, you should be familiar with the following:
  • Xampp
  • Composer
  • React
  • vite
  • React Bootstrap
  • Typescript
Knowledge of Typescript is helpful.

To install vite on your local System, you need the following:

Node.JS

vite requires a current, active LTS (long term support) or maintenance LTS (long term support) version of Node.js.

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)
Npm package Manager

The vite and React applications depend on npm packages for many features and functions.
To download and install npm packages, you need an npm package manager.
This guide uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed,run npm -v in a terminal/console window (cmd) For better understanding React we suggest you once go through official documentation of React from React Documentation and vite for  Vite documentation

Installation Process

Installation Process of Composer

In order to run Laravel we need to install composer by the following steps

Steps to Download & Installation of Composer

Step1: Please visit the Official Web Site of the Composer www.getcomposer.org

Step2: Click on the Download option

Step3: Click on the Composer-Setup.exe you are done with download

Step4: Now Right click on the Composer-Setup.exe file and select Run as administrator click on Yes

Step5: You'll be getting two options click as per your choice

Step6: I choose Recommended option here and if your developer you can check the box of the Developer Mode

Step7: And click on the Next button please make sure of installation path and then click Next

Step8: You'll be asked to enter proxy url please skip the step and click on the Next button

Step9: Please make sure with the PHP Version it should not be less than 8.2v, here we used 8.2.12 Version and then click on the next button

Step10: To confirm that Composer is installed in your system then type Composer in command prompt (if you are using XAMPP then go to C:\xampp\htdocs location and type composer)

How to Run the Nilova Template:

If you have installed XAMPP on your machine then please follow the below steps

Step:1 Quick view of Installations

1. Download and Install the Composer from official site https://getcomposer.org/

2. Install Laravel by using Composer as mentioned in the installation process above.

Step:2 Run project

1. Extract the zip folder of the laravel project in the path: EX: C:\xampp\htdocs\ that you have received after purchase.

2. Once the extraction is completed for accessing the laravel project, open command prompt or terminal and set your project root path: Example: C:\xampp\htdocs\

3. Open the terminal and set the root path of your template and then run the following command: "composer install" only if it is required to update your "vendor" directory.

4. Now run the below commands in the terminal to get the output of the project. To get the node_modules install.

To get the node_modules install.

code

 npm install

to get the build assets of the project.

code

 npm run build

And run the command line:

code

npm run dev

code

 php artisan serve

Laravel development server started: http://127.0.0.1:8000, now type the url in the browser to access the project.

Installation Video

InertiaJS

Inertia Setup Guidance

Inertia.js acts as a bridge between your Laravel backend and React frontend, allowing you to build modern SPAs without the complexity of managing APIs or client-side routing manually.

1.Server-side Setup:

The first step when installing Inertia is to configure your server-side framework. Inertia maintains an official server-side adapter for Laravel.

The setup includes Laravel’s powerful routing system and controllers, with Inertia’s Laravel adapter responsible for returning views as React components instead of traditional Blade templates. This allows developers to write backend logic in Laravel as usual, while seamlessly passing data to React components via Inertia.

First, install the Inertia server-side adapter using the Composer package manager.

code

composer require inertiajs/inertia-laravel

Next, set up the root Blade template that will be used when a user first visits your application. This template is responsible for loading your CSS and Typescript assets, and it must include a root where your Typescript frontend (React via Inertia) will be mounted. 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title inertia>Nilova - Inertia + React & Laravel Admin & Dashboard Template</title>
    <meta name="keywords"
        content="admin bootstrap template, admin dashboard ui, admin panel template, bootstrap admin dashboard, bootstrap admin template, laravel admin panel, laravel dashboard template, laravel inertia react, laravel inertia template, react admin panel template, react admin template, react bootstrap dashboard, react dashboard template, template admin bootstrap, template admin react">

     <!-- App favicon -->
    <link rel="icon" href="{{asset('/images/brand-logos/favicon.ico')}}" type="image/x-icon">

    <!-- ICONS CSS -->
    <link href="{{asset('/icon-fonts/icons.css')}}" rel="stylesheet">
    <!--@routes-->
    @viteReactRefresh
    @vite(['resources/ts/app.tsx'])
    @inertiaHead
</head>

<body>
    @inertia
</body>

</html>
2.Client-side Setup:

Once you have your server-side framework configured, you then need to setup your client-side framework. Inertia currently provides support for React, Vue, and Svelte..

First, install the Inertia client-side adapter corresponding to your framework of choice.

code

npm install @inertiajs/react

Initialize the Inertia app

Next, update your main Typescript file to boot your Inertia app. To accomplish this, we'll initialize the client-side framework with the base Inertia component.

code


import "./bootstrap";
import React from "react";
import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/react";
import "../css/app.scss";
import "./scssImages";
import "../css/scss/switcher.scss";
import RootWrapper from "@/Layouts/Rootwrapper";

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.tsx", { eager: true });
        const page = pages[`./Pages/${name}.tsx`].default; // 👈 Get the actual component
        return page;
    },
    setup({ el, App, props }) {
        createRoot(el).render(
            <RootWrapper>
                <App {...props} />
            </RootWrapper>,
        );
    },
});

// 🔥 Global click handler to prevent scroll for dummy anchors
document.addEventListener("click", (e: MouseEvent) => {
    const target = (e.target as HTMLElement)?.closest("a");
    if (!target) return;

    const href = target.getAttribute("href");
    if (href === "#" || href === "#!") {
        e.preventDefault();
    }
});

Nilova - File Generate

How to Create a New Page

To create a new page in a Laravel + Inertia.js + React application, start by adding a new React component inside the resources/js/Pages directory—for example, Newpage.tsx. This file will contain the structure and content of your new page using TSX. Next, define a corresponding route in Laravel’s routes/web.php file using the Inertia::render() method, which connects the URL path to the React component. Once the route is set, visiting that URL in the browser will render your new React page. Optionally, you can integrate the new page into your navigation menu using the Inertia Link component and wrap it in a layout component for a consistent UI.

Note:

If your are using "npm 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

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

Folder Structure

StaterKit Guide

Introduction to the Nilova Template Starter Kit:

The Nilova template starter kit is a resource that helps developers kickstart their Nilova 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 Inertia + React & Laravel-based websites or applications.

Purpose of the Nilova Template Starter Kit:

The purpose of the Nilova template starter kit is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in Nilova 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 Nilova Template Starter Kit:

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 Nilova template starter kit, developers should have a basic understanding of Inertia + React & Laravel and web development concepts. Additionally, they should have a web server environment Laravel + React & Inertia installed on their local machines or a hosting server. Familiarity with React, CSS, and Typescript is also beneficial for frontend development aspects.

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 have more than 180 pages.

We have provided all the pre-build layouts like Sidemenu, Header, Footer and Scripts etc in the Starterkit.

For further information or support regarding the template, please contact us using the provided link:https://support.spruko.com/

  • Take a look at the folder structure of the "Starterkit."
  • Integration of your customized .tsx pages becomes easy when using the "Starterkit."
  • The "Starterkit" provides all the layout components and related assets.
  • To explore the contents of the "Starterkit," unzip the project folder received after purchase.
    • Navigate to the following paths:
  • Example: resources/js/Layouts - This folder contains files such as authenticationlayout.tsx, landinglayout.tsx ,etc.
  • Example: resources/js/Pages/new folder create - Add your tsx pages here if you have more.

Main Layout

Basic Layout Structure

Main Layout structure of the Nilova template .Root:resources\js\Layouts\layout.tsx

React


import Footer from "../shared/layouts-components/footer/footer";
import Header from "../shared/layouts-components/header/header";
import Sidebar from "../shared/layouts-components/sidebar/sidebar";
import Backtotop from "../shared/layouts-components/backtotop/backtotop";
import React, { Fragment, useEffect, useRef, useState, type ReactNode } from "react";
import { Initialload } from "@/contextapi";
import { Provider } from "react-redux";
import { store } from "@/shared/redux/store";

const MainLayout = ({ children }: { children: ReactNode }) => {
    const progressRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const handleScroll = () => {
            const scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop;
            const scrollHeight =
                document.documentElement.scrollHeight -
                document.documentElement.clientHeight;
            const scrollPercent = (scrollTop / scrollHeight) * 100;

            if (progressRef.current) {
                progressRef.current.style.width = `${scrollPercent}%`;
            }
        };

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    const [pageloading, setpageloading] = useState(false);

    return (
        <Fragment>
            <Provider store={store}>
                <Initialload.Provider value={{ pageloading, setpageloading }}>
                    <div ref={progressRef} className="progress-top-bar"></div>
                    <div className="page">
                        <Header />
                        <Sidebar />
                        <div className="main-content app-content">
                            <div className="container-fluid page-container main-body-container">
                                {children}
                            </div>
                        </div>
                        <Footer />
                    </div>
                    <Backtotop />
                </Initialload.Provider>
            </Provider>
        </Fragment>
    );
};

export default MainLayout;

React File Structure

General React file structure of the Nilova template .resources\js\Pages\pages\empty\empty.tsx

React

    
    

import MainLayout from "@/Layouts/MainLayout";
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";

const Empty = () => {

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

Empty.layout = (page: any) => <MainLayout>{page}</MainLayout>;

export default Empty;

SideMenu Guide

Sidemenu Layout Structure

How to Add Menus to Sidebar.

In React project, it can be easy to add menus to the sidebar by modifying the MenuItems array in the nav.tsx resources\js\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 resources\js\shared\layouts-components\sidebar\nav.tsx file in React 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:

tsx


     {
       menutitle: "Your Menu Title",
     },
     {
       title: 'Your Component Title',
       selected: false,
       icon: 'icon-name',
       type: 'link', // or 'sub', 'external', 'empty'
       path: '/path-to-route', // Specify the route path for link type
       dirchange: false, change the direction from right to left .
       active: false,
       badge: 'badge-class', // (optional) Add a badge to the menu item
       badgetxt: 'Badge Text', // (optional) Text to display in the badge
     }
To add the children to Menu Items:

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

tsx


    {
        menutitle: "Your Menu Title", //The display name of the menu.
    }
    {
        title: 'Your Component Title', //The display name of the component.
        selected: false, //Set to true if this menu is currently selected.
        icon: 'icon-name', //The icon to display React to the menu.
        type: 'link', //Specify the type of the menu item (link, sub and empty).
        active: false, //Set to true to mark this menu as active.
        dirchange: false, //change the direction from right to left .
        badge: 'badge-class', // (optional) Add a badge to the menu item
        badgetxt: 'Badge Text' // (optional) Text to display in the badge
        children: [
         // (optional) Define child items for sub-menu  type
         {
           path: '/child-path', //Specify the route path for link type menu.
           title: 'Child Menu Title', //The display name of the Child Menu component.
           type: 'link', //Specify the type of the menu item (link, sub and empty).
           selected: false, //Set to true if this menu is currently selected.
           active: false, //Set to true to mark this menu as active.
         },
         // Add more child items if needed
       ]
    }
Save the Changes:

After adding your menu items, save the changes made to the nav.tsx resources\js\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 React project. The menus will be dynamically generated based on the content of the MenuItems array in the nav.tsx file.

Routing

Routing
In a single-page application, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. As users perform application tasks, they need to move between the different views that you have defined. To handle the navigation from one view to the next, you use the Laravel Router. The Router enables navigation by interpreting a browser URL as an instruction to change the view. Your complete route structure is place at web.php file under routes\web.php Suppose you want to create a new module ( For creating a new module refer create new module ) then you have to add new routes for that modules.
Basic Route

Following are the fundamental building blocks to creating a route web.php

code

    
    Route::get('', function () {
        return Inertia::render('Login'); // your React component
    });
    Route::get('dashboards/sales', function () {
        return Inertia::render('dashboards/sale/sale'); // your React component
    });
    Route::get('dashboards/analytics', function () {
        return Inertia::render('dashboards/analytics/analytics'); // your React component
    });
    Route::get('dashboards/ecommerce/dashboard', function () {
        return Inertia::render('dashboards/ecommerce/dashboard/dashboard');
    });
    .......etc.
Configure Link in Menu
To Add new link in Sidemenu

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

code


    ├── src
    ├──components
    ├──common
    ├──sidebar
            ├── nav.tsx
                export const MENUITEMS = [
                {
                    menutitle: 'MAIN'
                },
                {
                    title: "Dashboards", icon: Svgicons.Dashboardicon, type: "sub", active: false, dirchange: false, children: [

                       { path: `${import.meta.env.BASE_URL}dashboards/sales`, icon: Svgicons.Salesicon, type: "link", active: false, selected: false, dirchange: false, title: "Sales" },
                        { path: `${import.meta.env.BASE_URL}dashboards/analytics`, icon: Svgicons.Analyticsicon, type: "link", active: false, selected: false, dirchange: false, title: "Analytics" },

                    {......}
                    ]
                }
              ]

Firebase Authentication Guide

Firebase SetUp

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

bash

npm install firebase --save

step-2: Add firebase API configuration details(create database on firebase) to the firebase Auth Component refer the path (resources\js\firebase\auth.tsx)

tsx


   const firebaseConfig = {
       apiKey: "***",
       authDomain: "***",
       projectId: "***",
       storageBucket: "***",
       messagingSenderId: "***",
       appId: "***",
       measurementId: "***",
    };
    const firebaseApp = firebase.initializeApp(firebaseConfig);

    const db = firebaseApp.firestore();
    const auth = firebase.auth();

    export { db, auth };

Firebase Revocation process

To remove firebase from the project make sure that you have to remove the firebase tab from the (resources\js\Pages\Login.tsx). change the key variable to 'React.js' Example : const [key, setKey] = useState('React.js') in the the (resources\js\Pages\Login.tsx).
Firebase installation process

FAQ'S

Step 1:

Go To style.scss (resources/js/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(resources/js/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: resources\js\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

React

            
                

        Before: (Iconscout Icons)

        export const Dashboardicon =  <svg xmlns="http://www.w3.org/2000/svg" className="side-menu__icon" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M133.66,34.34a8,8,0,0,0-11.32,0L40,116.69V216h64V152h48v64h64V116.69Z" opacity="0.2"/><line x1="16" y1="216" x2="240" y2="216" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16"/><polyline points="152 216 152 152 104 152 104 216" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16"/><line x1="40" y1="116.69" x2="40" y2="216" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16"/><line x1="216" y1="216" x2="216" y2="116.69" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16"/><path d="M24,132.69l98.34-98.35a8,8,0,0,1,11.32,0L232,132.69" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16"/></svg>

        export const MENUITEMS = [
        { id: 1, menutitle: "MAIN",
            Items: [
                { id: 2,icon: Dashboardicon, title: "Dashboards", type: "sub", active: false,  dirchange: false, selected: false }
            ]
        }]

        After: (Feather Icons)
        const Dashboardicon = Modify the SVG here according to your needs.

        export const MenuItems = [
        { id: 1, menutitle: "MAIN",
            Items: [
                { id: 2,icon: Dashboardicon, title: "Dashboards", type: "sub", active: false,  dirchange: false, selected: false }
            ]
        }]

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

Typescript

export const LocalStorageBackup {}
Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions like LocalStorageBackup in switcher.tsx resources\js\shared\layouts-components\switcher\switcher.tsxfile.Below are the some examples to find out.

tsx


    
    import { Initialload } from '../../../contextapi'
    const theme: any = useContext(Initialload);

    useEffect(() => {
        if (!theme.pageloading) {
          LocalStorageBackup(theme.setpageloading);
        }
      }, []);

Step1:

Open header.tsx component resources\js\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: resources\js\shared\layouts-components\header\header.tsx 


    import Switcher from '../switcher/switcher';

    <Switcher show={show} handleClose={handleClose} />
Step3:

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

Step1:

Open authenticationlayout.tsx component resources\js\Layouts\authenticationlayout.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 \src\pages\landinglayout.tsx 


            import Landingswitcher from '../shared/layouts-components/switcher/landing-switcher'

            <Landingswitcher />
Step3:

Now remove the landingswitcher component from the root folder, follow the path resources\js\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 (resources/js/assets/scss/_variables.scss )

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 (resources/js/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

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

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.

React

npm i swiper react-swiper

React


import SpkSwiperJs from "../../../../shared/@spk-reusable-components/reusable-plugins/spk-swiperjs";
import * as swiperdata from "../../../../shared/data/general/adavanec-ui/swiperjsdata";

<SpkSwiperJs slides={swiperdata.Basicdata} spaceBetween={30} centeredSlides={true} autoplay={true} className="mySwiper swiper-basic"/>

css

  <!-- Swiper Css -->
@import "swiper/swiper-bundle.css";>

React


    import { Image } from "react-bootstrap";

    export const Basicdata = [
        <div><Image src="../../images/media/media-27.jpg" className="!rounded-md" alt="" /></div>,
        <div><Image src="../../images/media/media-26.jpg" className="!rounded-md" alt="" /></div>,
        <div><Image src="../../images/media/media-25.jpg" className="!rounded-md" alt="" /></div>,
    ];

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.

React

npm i apexCharts react-apexCharts

React


import Spkapexcharts from '../../../@spk-reusable-components/reusable-plugins/spk-apexcharts';
import * as linechartdata from "./linechartsdata";

<Spkapexcharts chartOptions={linechartdata.Linebasicoptions} chartSeries={linechartdata.Linebasicseries} type="line" width={"100%"} height={300} />

React


export const Linebasicseries = [{
  name: "Desktops",
  data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}]
export const Linebasicoptions = {
  chart: {
    height: 320,
    type: 'line',
    zoom: {
      enabled: false
    }
  },
  colors: ['#675db0'],
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'straight',
    width: 3,
  },
  grid: {
    borderColor: '#f2f5f7',
  },
  title: {
    text: 'Product Trends by Month',
    align: 'left',
    style: {
      fontSize: '13px',
      fontWeight: 'bold',
      color: '#8c9097'
    },
  },
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
    labels: {
      show: true,
      style: {
        colors: "#8c9097",
        fontSize: '11px',
        fontWeight: 600,
        cssClass: 'apexcharts-xaxis-label',
      },
    }
  },
  yaxis: {
    labels: {
      show: true,
      style: {
        colors: "#8c9097",
        fontSize: '11px',
        fontWeight: 600,
        cssClass: 'apexcharts-yaxis-label',
      },
    }
  },
}

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.

React

npm i suneditor-react

React


import SpkSunEditor from "@/shared/@spk-reusable-components/reusable-plugins/spk-suneditor";

<SpkSunEditor defaulContent={defaultContent} />

css

 <!-- Swiper Css -->
 @import 'suneditor/dist/css/suneditor.min.css';>

React

 const defaultContent = `
  <h4><b class="ql-size-large">Basic Suneditor</b> is a free, open source <a href="https://github.com/mkhstar/suneditor-react" target="_blank">Sun Editor</a> built for the modern web. With its <a href="https://suneditorjs.com/docs/modules/" target="_blank">modular architecture</a> and expressive API, it is completely customizable to fit any need.</h4>
  <p><br/></p>
  <ol>
    <li class="ql-size-normal">Write text, select, and edit with multiple options.</li>
    <li>This is suneditor snow editor.</li>
    <li>Easy to customize and flexible.</li>
  </ol>
  <p><br/></p>
  <h4>Suneditor officially supports a standard toolbar theme <a href="https://github.com/mkhstar/suneditor-react" target="_blank">"Snow"</a> and a floating tooltip theme <a href="https://github.com/mkhstar/suneditor-react" target="_blank">"Bubble"</a></h4>
`;

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.

React

npm i react-datepicker

React


 import SpkDatepickr from "@/shared/@spk-reusable-components/reusable-plugins/spk-datepicker

const [dates, setDates] = useState<{ [key: string]: Date | string | null }>({});

const handleDateChange = (key: string, date: Date | null) => {
    if (date) {
        setDates((prevDates) => ({
            ...prevDates,
            [key]: date,
        }));
    } else {
        setDates((prevDates) => {
            const { [key]: removedKey, ...rest } = prevDates;
            return rest;
        });
    }
};

<Form.Group>
    <InputGroup className="datepicker-inputwraper">
        <InputGroup.Text className="input-group-text text-muted"> <i className="ri-calendar-line"></i></InputGroup.Text>
        <SpkDatepickr className="form-control" placeholderText="Choose date" selected={dates["basicDate"] ? new Date(dates["basicDate"]) : null} onChange={(date: Date | null) => handleDateChange("basicDate", date)} />
    </InputGroup>
</Form.Group>

css

 <!-- Swiper Css -->
@import 'react-datepicker/dist/react-datepicker.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.

React

npm i react-select

React


 import SpkSelect from "@/shared/@spk-reusable-components/reusable-plugins/spk-reactselect";
 <SpkSelect name="state" option={Selectoption1} mainClass="basic-multi-select " searchable menuplacement='auto' classNameprefix="Select2" defaultvalue={[Selectoption1[0]]} />

React


interface Selectoption {
	value: string;
	label: string;
}
export const Selectoption1: Selectoption[] = [
	{ value: "Selection-1", label: "Selection-1" },
	{ value: "Selection-2", label: "Selection-2" },
	{ value: "Selection-3", label: "Selection-3" },
	{ value: "Selection-4", label: "Selection-4" },
	{ value: "Selection-5", label: "Selection-5" }
];

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.

React

npm i gridjs-react gridjs

React


import SpkGridjstables from "@/shared/@spk-reusable-components/reusable-plugins/spk-gridjstables";
<SpkGridjstables Data={Data} Columns={["Date", "Name", "Email", "Id", "Price", "Quantity", "Total"]} />

React

 export const Data = [
export const 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"]
];

type GridData = Array<[string, string, string, string, string, string, string]>;
export const Data1 = (): Promise<GridData> => {
	return new Promise(resolve => {
		setTimeout(() =>
			resolve([
				["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"]
			]), 2000);
	});
};

css

  <!-- Css -->
 @import "gridjs/dist/theme/mermaid.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.

React

npm i react-toastify

React


 import SpkToastify from "@/shared/@spk-reusable-components/reusable-plugins/spk-toastify";
 import SpkButton from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-buttons";

<SpkButton Buttonvariant="primary" Id="toast-button" onClickfunc={notify}>Click For Live Toast</SpkButton>
<SpkToastify position="top-right" theme={getState().dataThemeMode==='light'?'light':'dark'} />

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.

React

npm i @mui/material

React


import SpkRatings from "@/shared/@spk-reusable-components/reusable-plugins/spk-ratings";

<SpkRatings name="half-rating" size="large" defaultValue={0} max={5} />

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

React

import SpkTablescomponent from "@/shared/@spk-reusable-components/tables-component";
import {Basictable} from "@/shared/data/tables/tablesdata";
import SpkTables from "@/shared/@spk-reusable-components/reusable-tables/spk-tables";

<SpkTables tableClass="text-nowrap" header={[{ title: 'Name' }, { title: 'Created On' }, { title: 'Number' }, { title: 'Status' }]}>
    {Basictable.map((idx, index) => (
        <tr key={index}>
            <th scope="row">{idx.name}</th>
            <td>{idx.date}</td>
            <td>{idx.number}</td>
            <td><SpkBadge variant="" Customclass={`bg-outline-${idx.color}`}>{idx.status}</SpkBadge></td>
        </tr>
    ))}
</SpkTables>

data


interface Basic {
    id: number;
    name: string;
    date: string;
    number: string;
    status: string;
    color: string;
}
export const Basictable: Basic[] = [
    { id: 1, name: "Mark", date: "21,Dec 2024", number: "+1234-12340", status: "Completed", color: "primary" },
    { id: 2, name: "Monika", date: "29,April 2024", number: "+1523-12459", status: "Failed", color: "warning" },
    { id: 3, name: "Madina", date: "30,Nov 2024", number: "+1982-16234", status: "Successful", color: "success" },
    { id: 4, name: "Bhamako", date: "18,Mar 2024", number: "+1526-10729", status: "Pending", color: "secondary" },
]

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.

React


import SpkAlerts from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-alerts";
import {Linkalerts} from "@/shared/data/general/ui-elements/alertsdata";

{Linkalerts.map((idx, index) => (
    <SpkAlerts variant={idx.class} key={index}>{idx.text1}
        <a  href="#!" className="alert-link">{idx.text2}</a>{idx.text3}
    </SpkAlerts>
))}

data



interface alert2 {
	text1: string
	text2: string
	text3: string
	class: string
}
export const Linkalerts: alert2[] = [
	{ text1: "A simple primary alert with ", text2: " an example link. ", text3: "Give it a click if you like.", class: "primary" },
	{ text1: "A simple secondary alert with", text2: " an example link. ", text3: "Give it a click if you like.", class: "secondary" },
	{ text1: "A simple success alert with", text2: " an example link. ", text3: "Give it a click if you like.", class: "success" },
	{ text1: "A simple danger alert with ", text2: " an example link. ", text3: "Give it a click if you like.", class: "danger" },
	{ text1: "A simple warning alert with ", text2: " an example link. ", text3: "Give it a click if you like.", class: "warning" },
	{ text1: "A simple info alert with", text2: " an example link. ", text3: "Give it a click if you like.", class: "info" },
	{ text1: "A simple light alert with ", text2: " an example link. ", text3: "Give it a click if you like.", class: "light" },
	{ text1: "A simple dark alert with", text2: " an example link. ", text3: "Give it a click if you like.", class: "dark" },

];

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.

React


import SpkButton from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-buttons";
import {DefaultButtons} from "@/shared/data/general/ui-elements/buttonsdata";

{DefaultButtons.map((idx, index) => (
	<SpkButton Buttontype="button" Buttonvariant={idx.class} Customclass="waves-effect waves-light me-2" key={index}>{idx.text}</SpkButton>
))}

data



interface buttons1 {
	id: number
	text: string
	class: string
}
export const DefaultButtons: buttons1[] = [
	{ id: 1, class: "primary", text: " Primary" },
	{ id: 2, class: "secondary", text: "  Secondary" },
	{ id: 3, class: "success", text: " Success" },
	{ id: 4, class: "danger", text: "  Danger" },
	{ id: 5, class: "warning", text: "  Warning" },
	{ id: 6, class: "info", text: "Info" },
	{ id: 7, class: "light", text: " Light" },
	{ id: 8, class: "dark", text: "  Dark" },
	{ id: 9, class: "link", text: "Link" },
];

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.

React


import SpkBadge from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-badge";
import {Badgesdata} from "@/shared/data/general/ui-elements/badgesdata";

{Badgesdata.map((badge, index) => (
    <SpkBadge key={index} variant={badge.color} Customclass={`bg-${badge.color} ${badge.class}`}>{badge.heading}</SpkBadge>
))}

data


interface badge {
    id: number
    heading: string
    color: string
    class: string
}
export const Badgesdata: badge[] = [
    { id: 1, heading: "Primary", color: "primary", class: "" },
    { id: 5, heading: "Secondary", color: "secondary", class: "" },
    { id: 6, heading: "Success", color: "success", class: "" },
    { id: 7, heading: "Danger", color: "danger", class: "" },
    { id: 8, heading: "Warning", color: "warning", class: "" },
    { id: 9, heading: "Info", color: "info", class: "" },
    { id: 10, heading: "Light", color: "light", class: "text-dark" },
    { id: 11, heading: "Dark", color: "dark", class: "text-white" },
];

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.

React


import SpkButton from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-buttons";
import SpkButtongroup from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-buttongroup";

<SpkButtongroup Size="lg" Customclass="my-1 me-3" Buttongrplabel="Large button group">
    <SpkButton Buttonvariant="outline-success" Buttontype="button">Left</SpkButton>
    <SpkButton Buttonvariant="outline-success" Buttontype="button">Middle</SpkButton>
    <SpkButton Buttonvariant="outline-success" Buttontype="button">Right</SpkButton>
</SpkButtongroup>
<SpkButtongroup Customclass="my-1 me-3" Buttongrplabel="Default button group">
    <SpkButton Buttonvariant="outline-success" Buttontype="button">Left</SpkButton>
    <SpkButton Buttonvariant="outline-success" Buttontype="button">Middle</SpkButton>
    <SpkButton Buttonvariant="outline-success" Buttontype="button">Right</SpkButton>
</SpkButtongroup>
<SpkButtongroup Size="sm" Customclass="my-1 me-1" Buttongrplabel="Small button group">
    <SpkButton Buttonvariant="outline-success" Buttontype="button">Left</SpkButton>
    <SpkButton Buttonvariant="outline-success" Buttontype="button">Middle</SpkButton>
    <SpkButton Buttonvariant="outline-success" Buttontype="button">Right</SpkButton>
</SpkButtongroup>

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.

React


import SpkCard from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/reusable-cards/spk-basiccard";

<SpkCard titleClass="fw-medium px-3 pt-3" bodyClass="p-0" imgClass="card-img-top" imgSrc="../../images/media/media-24.jpg" title="Card title" bodyText={(
    <>
        <p className="card-text px-3 pb-3 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <ul className="list-group list-group-flush border-top"
        > <li className="list-group-item">An item</li>
            <li className="list-group-item">A second item</li>
        </ul>
        <div className="card-body border-top">
            <a href="#!" className="card-link text-primary">Card link</a>
            <a href="#!" className="card-link text-secondary d-inline-block">Another link</a>
        </div>
    </>
)} />

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

React


import SpkTooltips from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-tooltips";
import {Tooltipdirtooltip } from "@/shared/data/general/ui-elements/tooltipsdata";

{Tooltipdirtooltip.map((idx, index) => (
    <SpkTooltips placement={idx.text} title={`Tooltip on ${idx.text}`} key={index} >
        <SpkButton Customclass="btn-wave waves-effect waves-light" Buttontype="button" Buttonvariant="primary">
            Tooltip on {idx.text}
        </SpkButton>
    </SpkTooltips>
))}

React



interface direction {
	id: number
	text: string
}
export const Tooltipdirtooltip: direction[] = [
	{ id: 1, text: "top" },
	{ id: 2, text: "right" },
	{ id: 3, text: "bottom" },
	{ id: 4, text: "left" }
];

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.

React


import SpkPopovers from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-popovers";
import {Defaultalerts} from "@/shared/data/general/ui-elements/popoverdata";

{Defaultalerts.map((idx, index) => (
	<SpkPopovers trigger="click" placement={idx.class} key={index} title={`Popover ${idx.text}`} content={`And here's some amazing content. It's very engaging. ${idx.text}?`}>
		<SpkButton Buttonvariant='outline-primary'>Popover {idx.text}</SpkButton>
	</SpkPopovers>
))}

React



interface defaultalerts {
	id: number
	text: string
	class: string
}
export const Defaultalerts: defaultalerts[] = [
	{ id: 1, text: "Top", class: "top" },
	{ id: 2, text: "Right", class: "auto" },
	{ id: 3, text: "Bottom", class: "bottom" },
	{ id: 4, text: "Left", class: "left" },
];

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.

React


 import SpkProgress from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-progress";
 import {progressdata} from "@/shared/data/general/ui-elements/progressdata";

{progressdata.map((idx, index) => (
	<SpkProgress key={index} variant="primary" now={idx.data} mainClass="progress mb-3" />
))}

React


interface ProgressType {
    id: number;
    data: number;
}
export const progressdata: ProgressType[] = [
    { id: 1, data: 0 },
    { id: 2, data: 25 },
    { id: 3, data: 50 },
    { id: 4, data: 75 },
    { id: 5, data: 100 },
]

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.

React


import SpkListgroup from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-listgroup";
import {BasicButtons} from "@/shared/data/general/ui-elements/listgroupdata";

{BasicButtons.map((idx, index) => (
    <ListGroup.Item as="li" key={index}>
        <div className="d-flex align-items-center">
            <span className="avatar avatar-sm">
                <Image src={idx.src} alt="img" />
            </span>
            <div className="ms-2 fw-semibold">
                {idx.text}
            </div>
        </div>
    </ListGroup.Item>
))}

React


interface basicbtn {
	id: number
	src: string
	text: string
}

export const BasicButtons: basicbtn[] = [
	{ id: 1, src: "../../images/faces/1.jpg", text: "Alicia Sierra" },
	{ id: 2, src: "../../images/faces/3.jpg", text: "Samantha Mery" },
	{ id: 3, src: "../../images/faces/6.jpg", text: "Juliana Pena" },
	{ id: 4, src: "../../images/faces/15.jpg", text: "Adam Smith" },
	{ id: 5, src: "../../images/faces/13.jpg", text: "Farhaan Amhed" },
];

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.

React


 import SpkToast from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-toast";

const [toasts, setToasts] = useState<{ [key: string]: boolean }>({});

const addToast = (toastName: string) => {
    setToasts((prevToasts) => ({
        ...prevToasts,
        [toastName]: true,
    }));
};

const handleToasts = (toastName: string) => {
    setToasts((prevToasts) => ({ ...prevToasts, [toastName]: false }));
};

<SpkToast toastClass="align-items-center text-bg-primary border-0 fade show mb-4" message="Hello, world! This is the Primary toast message. " btnClass="btn-close btn-close-white m-auto" show={toasts["primary"]} onClose={() => handleToasts('primary')} ToastBtn={true} ToastHeader={false} />

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.

React


import SpkAccordions from "@/shared/@spk-reusable-components/general-reusable/reusable-advancedui/spk-accordions";
import {Basicdata} from "@/shared/data/general/adavanec-ui/accordionsdata";

<SpkAccordions items={Basicdata} defaultActiveKey={1} />

React


interface BasicType {
    id: number;
    title: string;
    content: ReactNode;

}
export const Basicdata: BasicType[] = [
    {
        id: 1,
        title: "Accordion Item #1",
        content: (
            <>
                <strong>This is the first item's accordion body.</strong>
                {" It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "}
                <code>.accordion-body</code>
                {" though the transition does limit overflow."}
            </>
        ),
    },
    {
        id: 2,
        title: "Accordion Item #2",
        content: (
            <>
                <strong>This is the first item's accordion body.</strong>
                {" It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "}
                <code>.accordion-body</code>
                {" though the transition does limit overflow."}
            </>
        ),
    },
    {
        id: 3,
        title: "Accordion Item #3",
        content: (
            <>
                <strong>This is the first item's accordion body.</strong>
                {" It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the "}
                <code>.accordion-body</code>
                {" though the transition does limit overflow."}
            </>
        ),
    },
];

React-leaflet Maps :

Leaflet Maps is a modern typescript maps plugin..

React

npm i react-leaflet leaflet

React


const SpkLeaflet = dynamic(() => import('@/shared/@spk-reusable-components/reusable-plugins/spk-leaflet'), { ssr: false });
//
const position = [51.505, -0.09];

<SpkLeaflet position={position} Zoom={13} scrollWheel={true} Customclass="mapleaflet ht-300" Id="leaflet1" />

css

    <!-- Leaflet Maps CSS -->
@import "leaflet/dist/leaflet.css";

Plugin link

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

Reference Link 

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

Pigeon Maps :

Pigeon Maps is a modern typescript maps plugin..

React

npm i pigeon-maps

React


mport { Map, Marker, Overlay, Draggable, ZoomControl,  } from 'pigeon-maps'
//
const [center, setCenter] = useState([50.879, 4.6997])
const [zoom, setZoom] = useState(11)

<div id="vector-map">
    <Map height={300} center={center} zoom={zoom} onBoundsChanged={({ center, zoom }) => { setCenter(center); setZoom(zoom) }} />
</div>

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
laravel-vite-plugin v2.0.0 https://www.npmjs.com/package/laravel-vite-plugin
axios v1.11.0 https://www.npmjs.com/package/axios
@inertiajs/react v3.5.0 https://www.npmjs.com/package/@inertiajs/react
React v19.2.7 https://react.dev/
Mui v9.1.1 https://www.npmjs.com/package/@mui/material
react-redux v9.3.0 https://www.npmjs.com/package/react-redux
react-hook-form v7.80.0 https://www.npmjs.com/package/react-hook-form
Rxjs v7.8.2 https://www.npmjs.com/package/rxjs
Firebase v12.15.0 https://firebase.google.com/
Swiper v14.0.0 https://swiperjs.com/get-started
Sweet alerts2 v11.26.25 https://sweetalert2.github.io/
Yet-another-react-lightbox v3.32.0 https://yet-another-react-lightbox.com/
Full Calendar v6.1.21 https://fullcalendar.io/
React-leaflet v5.0.0 https://react-leaflet.js.org/
React-apexcharts v2.1.1 https://apexcharts.com/react-chart-demos/
React-chartjs-2 v5.3.1 https://www.npmjs.com/package/react-chartjs-2
Echarts-for-react v3.062 https://www.npmjs.com/package/echarts-for-react
Simplebar-react v3.3.2 https://www.npmjs.com/package/simplebar-react
Suneditor-react v3.6.1 https://www.npmjs.com/package/suneditor-react
React-filepond v7.1.3 https://pqina.nl/filepond/
React-range-slider-input v3.3.5 https://www.npmjs.com/package/react-range-slider-input
React-range v1.10.0 https://www.npmjs.com/package/react-range
React-select v5.10.2 https://www.npmjs.com/package/react-select
React-dropdownselect v4.12.2 https://www.npmjs.com/package/react-dropdown-select
React-gridjs v6.1.1 https://www.npmjs.com/package/gridjs-react
react-data-table-component v8.4.0 https://www.npmjs.com/package/react-data-table-component
React-countup v6.5.3 https://www.npmjs.com/package/react-countup
React-toastify v11.1.0 https://www.npmjs.com/package/react-toastify
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.13 https://www.npmjs.com/package/react-country-state-city
Shepherd.js v15.2.2 https://www.npmjs.com/package/@reactour/tour
React-color-palette v7.3.1 https://www.npmjs.com/package/react-color-palette
emoji-picker-react v4.19.1 https://www.npmjs.com/package/emoji-picker-react
plyr-react v6.0.0 https://www.npmjs.com/package/plyr-react
glightbox v3.3.1 https://www.npmjs.com/package/glightbox
Nilova- Premium Boostrap Admin Dashboard Template
Protfolio Buy Now Preview
Information
Need Help ?
Support Help Desk
Technical issues? Our support team is ready to help.
Help Desk
Pre-Sales
Have questions before purchasing? Contact our pre-sales team.
Send Mail
Pre-Sales Chat
Get immediate answers through our live chat support.
Live chat