Xintra – NextJS Typescript App-Router TailwindCss Admin & Dashboard Template
Introduction

Xintra – NextJS Typescript App-Router TailwindCss Admin & Dashboard Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using NextJS, CSS3, TailwindCss framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.

If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊

Dashboard
Welcome to Xintra - NextJs TypeScript App-Router TailwindCss Admin & Dashboard Template
  • Created Date : 03/Mar/2025
  • Author : Spruko
  • Company : Spruko Technologies Private Limited

Thank you for showing interest towards our admin template. Feel free to contact us any time. We have a dedicated team to provide you the best support. If you want any queries open support ticket https://support.spruko.com.

Template Description

Xintra is a NextJS Typescript App-Router TailwindCss Admin Template using modern and minimal design. It is fully flexible user-friendly and responsive. Xintra Modern template is powered with NextJS Pages, SASS, & TailwindCss which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 180+ NextJS Pages . No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. This template using TailwindCss framework. After Purchased this template you will get All tsx files,CSS, Scss and TSX Files.

It has super clean flat user interface admin design, easy customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design template.

It is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices

Once you Purchase Xintra NextJS Typescript App-Router TailwindCss Admin Template, you will be able to get free download of all future updates.

Dependencies
Browser Compatibility
  • Firefox
  • Safari
  • Opera
  • Chrome
  • Edge
Switcher Features
Theme Styles
  • Light & Dark Themes
  • LTR & RTL
  • Vertical & Horizontal Navigation Styles
  • Menu Click & Hover Styles
  • Icon Click & Hover Styles
  • Page Regular, Classic & Modern Styles
  • Full Width & Boxed
  • Menu Fixed & Scrollable
  • Header Fixed & Scrollable
  • Sidemenu Closed
  • Icon Text Menu
  • Icon Overlay
  • Detached
  • Double Menu
Theme Colors
  • Menu Light
  • Menu Dark
  • Menu Color
  • Menu Gradient
  • Menu Transparent
  • Header Light
  • Header Dark
  • Header Color
  • Header Gradient
  • Header Transparent
  • Theme Primary
  • Theme Background
  • Menu With Background Images
Template Features
No Jquery Dark Layout RTL Ready
Icons Authentication Pages Error Pages
180+ NextJS Pages Easy to Customize TailwindCss Responsive Framework
Form Elements Maps Ratings
Form Advanced Form wizards Profile Settings
Grid JS Tables Data Tables Gallery
Apex Charts Chartjs Charts Echarts
Full Calendar Sweet Alerts Swiper JS
Blog Pages Mail App Chat
File Manager Invoice Landing Page
Pricing Profile Placeholders
Ecommerce Pages Job Pages Task Pages
NFT Pages CRM Pages Crypto Pages
Form Validation Sortable Js Tour
24 * 7 Professional Company Support Media Player Under Construction Page
Color Theme Support (Primary and Background) Neat, clean and simple design W3C Validated
Getting Start Guide
Getting Started

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.

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

Prerequisites
To use the NextJs Typescript Framework, you should be familiar with the following:
  • NextJs
  • Tailwindcss
  • Typescript
Knowledge of Typescript is helpful.
Xintra - 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:

  1. From a terminal window, navigate to the directory containing your application
  2. Run the generate-react-cli component <component-name> command, where <component-name> is the name of your new component. 
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
Tailwind frame configuration
Step: 1 Install Tailwind CSS dependencies

After initialize a Next.js project install the required dependencies for Tailwind CSS. Run the following command in your project directory:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Step: 2 Create Tailwind CSS configuration file

Generate a Tailwind CSS configuration file by running the following command:

npx tailwindcss --init

This will create a tailwind.config.js file in your project's root directory.

Step: 3 Configure PostCSS

Create a "postcss.config.js" file in your project's root directory and add the following configuration:

 
export default {
        plugins: {
            "postcss-import": {},
            tailwindcss: {},
            autoprefixer: {},
          },
        };
Nextjs configuration
Step: 1 Open your terminal or command prompt and run the following command to create a new Next.js app: 
 

            npx create-next-app@latest
Step: 2 After installation, change the directory to your project folder using the command: 
 

            cd Projectname
Step: 3 After creating a Next.js app, you can find the package.json file in the root directory of your project. Within this file, you'll find several scripts pre-configured by default: 
 

            {
                "scripts": {
                  "dev": "next dev",
                  "build": "next build",
                  "start": "next start",
                  "lint": "next lint"
                }
              }
These scripts refer to the different stages of developing an application:
  • dev: runs next dev to start Next.js in development mode.
  • build: runs next build to build the application for production usage.
  • start: runs next start to start a Next.js production server.
  • lint: runs next lint to set up Next.js' built-in ESLint configuration.
Step: 4 Start the Development Server: Next, start the development server by running: 
 

            npm run dev
Xintra Next.js Setup

Note: you have already download and install node.js and Next.js then ignore prerequisites.

Prerequisites
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)

Next.js

To install the Next.js using npm, open a terminal/console window and run the following command.

npm install
            (or)
        yarn install
Final installation of Xintra Next.js

Setup an Xintra Template by Download the Xintra-ts rar/zip file. then Extract it and then go in to Folder here you will see a XintraJS Folder

You can import all dependency by installing npm command

npm install
            (or)
        yarn install

Now you are in stage to successfully run sash using below command:

npm run dev
            (or)
        yarn run dev

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

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.

The --force argument overrides any previously installed dependencies and fetches remote resources even if a local copy exists on disk. It follows a "last-dependency-downloaded-wins" approach, which means that it will overwrite any previously downloaded 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.

npm install --force

When installing packages using npm, if there are peer dependency issues, npm will always skip the installation of peer dependencies, even if there are no issues. Peer dependencies are a specific type of dependency that a package requires to function properly, but which are not managed by that package's dependency manager.

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.

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: 

yarn run build
            (or)
        npm run build
Note:
To deploy your project successfully, ensure that your domain is correctly added to the basePath in next.config.ts. path:xintra-ts\next.config.ts
Installation Video
Folder Structure

        ├── app/
        |	|-- (components)/
        |	|-- |-- (authentication-layout)/
        |	|-- |-- |-- authentication/
        |	|-- |-- └── layout.tsx
        |	├── |-- (content-layout)/
        |	|   |-- |-- advanced-ui/
        |	|   |-- |-- |-- acoordions-collapse/
        |	|   |-- |-- └── |--page.tsx
        |	|   |-- └── layout.tsx
        |	|-- |-- (landing-layout)/
        |	|-- └──- layout.tsx
        |	|-- favicon.ico
        |	|-- globals.scss
        |	|-- layout.tsx
        |	|-- not-found.tsx
        |	|-- page.tsx
        |	|-- PrelineScript.tsx
        ├── public/
        |	|-- assets/
        |	|-- file.svg
        |	|-- globe.svg
        |	|-- next.svg
        |	|-- vercel.svg
        |	└── window.svg
        ├── shared/
        |	|-- @spk-reusable-components/
        |	|-- data/
        |	|-- firebase/
        |	|-- layout-components/
        |	└── redux
        ├── eslintrc.json
        ├── next-env.d.ts
        ├── next.config.ts
        ├── package-lock.json
        ├── package.json
        ├── plugin.d.ts
        ├── postcss.config.js
        ├── README.md 
        ├── tailiwnd.config.ts
        └── tsconfig.json
Folders Description
  • Xintra - NextJs Typescript App-Router Admin Dashboard Template / : Root template folder contain all tsx, scss, images and other files.
    • app/ : For server-side routing, you can use Next.js's API routes feature.
      • (components)/: A grouping folder for four layouts. The parentheses indicate a grouping, not a route itself.
        • (authentication-layout)/ : A grouping folder for authentication-related pages.
        • (content-layout)/ : A grouping folder for components.
        • (landing-layout)/ : A grouping folder for landing pages.
      • api/: Serverless API route to handle contact form submissions.
      • global.scss/ :Global scss file applied to all pages.
      • layout.scss/ : Defines a layout that wraps all pages. Useful for common components like headers or footers.
      • notfound.scss/ :app/not-found handles global unmatched URLs.
      • page.tsx/ : The root index page component for your application.
      • PrelineScript.tsx/ : Script to import or call preline.
    • public/
      • assets/:Stores static assets like images, accessible via /public/assets
    • shared/ :Reusable components and Data files that can be used across multiple pages.
    • eslintrtc.json : ESLint configuration file.
    • next-env.d.ts : Next.js environment declaration file.
    • next-config.ts : Configuration file for customizing your Next.js setup.
    • package.json : Contains metadata about the project and its dependencies.
    • plugin.d.ts : Declaration file to handle package redeclaration errors.
    • postcss.config.js : PostCSS configuration file.
    • README.md : Project documentation and instructions.
    • tailwind.config.ts : Tailwind CSS configuration file.
    • tsconfig.json : TypeScript configuration file.

  • Creating Routes

    Pages:

    Each folder within the /app directory corresponds to a route. For example:

    • /app/(components)/(content-layout)/advanced-ui/accordions-collapse/page.tsx corresponds to the advanced-ui/accordions-collapse route.
    Nested Routes

    To create nested routes, simply nest folders. For example:

    • /app/(components)/(content-layout)/app/advanced-ui/accordions-collapse/page.tsx corresponds to the app/advanced-ui/accordions-collapse route under the content-layout grouping.
    Layouts:
    • layout.tsx in the /app directory defines a global layout.
    • You can create nested layouts by adding a layout.tsx file in subdirectories.
    Grouping:
    • Parentheses around a folder name indicate a grouping and do not affect the route structure but help in organizing related routes.
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 Xintra-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

                            starterkit/
                            ├── app/
                            |     ├── (components)/
                            |     |     ├── (authentication-layout)/
                            |     |     ├── (content-layout)/
                            |     |     └── layout.tsx
                            |     ├── api/
                            |     ├── favicon.ico
                            |     ├── global.scss
                            |     ├── layout.tsx
                            |     ├── not-found.tsx
                            |     ├── page.tsx
                            |     └── not-found.tsx
                            ├── public/
                            |      ├── assets/
                            |      ├── next.svg
                            |      └── vercel.svg
                            ├── shared/
                            |       ├── @spk-reusable-components/
                            |       ├── data/
                            |       ├── firebase/
                            |       ├── layout-components/
                            |       └── redux/
                            ├── eslintrtc.json
                            ├── gitignore
                            ├── next-env.d.ts
                            ├── next-config.js
                            ├── package-lock.json
                            ├── package.json
                            ├── README.md
                            └── tsconfig.json
  • 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.
Structure

							
                    ├── app/
                    |   ├── (components)/
                    |   |   |     ├──(authentication-layout)/
                    |   |   |     |      ├──authentication/
                    |   |   |     |      └──layout.tsx
                    |   |   |     ├──(content-layout)/
                    |   |   |     |      ├──advanced-ui/
                    |   |   |     |      ├──apps/
                    |   |   |     |      ├──charts/
                    |   |   |     |      ├──dashboard/
                    |   |   |     |      ├──forms/
                    |   |   |     |      ├──icons/
                    |   |   |     |      ├──maps/
                    |   |   |     |      ├──nestedmenu/
                    |   |   |     |      ├──pages/
                    |   |   |     |      ├──tables/
                    |   |   |     |      ├──ui-elements/
                    |   |   |     |      ├──utilities/
                    |   |   |     |      ├──widgets/
                    |   |   |     |      └──layout.tsx
                    |   |   |     ├──(landing-layout)/
                    |   |   |     |      ├──landing/
                    |   |   |     |      └── layout.tsx
                    |   └── └──   └── layout.tsx

                            
                    ├── public/
                    |   ├── assets/
                    |   |   |     ├──audio/
                    |   |   |     ├──css/
                    |   |   |     |   ├──styles.css/
                    |   |   |     |   └──styles.css.map/
                    |   |   |     ├── icon-fonts/
                    |   |   |     |      ├──bootstrap-icons/
                    |   |   |     |      ├──boxicons/
                    |   |   |     |      ├──feather/
                    |   |   |     |      ├──line-awesome/
                    |   |   |     |      ├──remixicons/
                    |   |   |     |      └──tabler-icons/
                    |   |   |     ├──images/
                    |   |   |     ├──scss/
                    |   |   |     |      ├──custom/
                    |   |   |     |      ├──global/
                    |   |   |     |      ├──menu-styles/
                    |   |   |     |      ├──pages/
                    |   |   |     |      ├──util/
                    |   |   |     |      ├──icons.scss
                    |   |   |     |      ├──_switcher.scss
                    |   |   |     |      ├──_variables.scss
                    |   |   |     |      └──styles.scss
                    |   └── └──   └──  video/
Main Layout
Basic Layout Structure

Root:app\layout.tsx

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:

To add the children to Menu Items:

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

  • menutitle: The display name of the menu.
  • title: The display name of the component.
  • selected: Set to true if this menu is currently selected.
  • icon: The icon to display next to the menu.
  • type: Specify the type of the menu item (link, sub and empty).
  • path: Specify the route path for link type menu.
  • active: Set to true to mark this menu as active.
  • dirchange: change the direction from right to left .
  • badgeClass (optional): CSS class for the badge.
  • badgeValue (optional): Text to display in the badge.
  • children: Define an array of child menu items for sub-menu type.
Save the Changes:

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 Next.tsx project. The menus will be dynamically generated based on the content of the MenuItems array in the nav.tsx file.
Routing
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.
  • For example:
    app/page.tsx corresponds to the root route (/),  while app/dashboard/sales corresponds to /sales.
Next.js routing, based on the file system, offers a streamlined and developer-friendly approach to defining routes in web applications. By leveraging the inherent structure of the project directory, Next.js simplifies route management while empowering developers to create dynamic, nested routes.


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="/dashboard/sales">Sles
            </Link>
                </li>
                <li>
                <Link href="/dashboard/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: "/dashboard/sales",
                  type: "link",
                  active: false,
                  selected: false,
                  dirchange: false, 
                  title: "Sales",
                },
                {
                  path: "/dashboard/analytics",
                  type: "link",
                  active: false,
                  selected: false,
                  dirchange: false, 
                  title: "Analytics",
                },
                {
                  path: "/dashboard/ecommere",
                  type: "link",
                  active: false,
                  selected: false,
                  dirchange: false, 
                  title: "Ecommerce",
                },
                ]
            }
          ]
Changing SCSS to CSS using the SASS Package
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:

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:

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

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

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

    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:

    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.

step-2: Add firebase API configuration details(create database on firebase) to the firebase Auth Component refer the path (/shared/firebase/firebaseapi.tsx)

Firebase Revocation process
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
image
image
image
image
FAQ'S
General Style

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

Example:

Step 2:

And paste Your Selected font-family in style.scss

Example:

Step 3:

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

Example:

    --default-font-family:    							"Montserrat", 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 nav.tsx page Path: shared\layouts-components\sidebar\nav.tsx and go through app-sidebar section, in that section you will find icontag, 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.

To change Layout Theme

open reducer.tsx path:(shared\redux\reducer.tsx).

Theme Array Documentation

The theme array provided below is designed to control the layout and styling of a web application. By modifying the values in this array, you can change the visual appearance and behavior of various components in the application. The array includes settings related to color schemes, layout styles, header and menu styles, and more.

Initial State

The initial state of the theme array defines the default values for different aspects of the application's appearance and behavior. These values are used as a starting point and can be dynamically modified using the provided functions.


            let initialState = {
                lang: "en",                 // Default language
                dir: "ltr",                 // Default text direction (ltr or rtl)
                class: "light",             // Default color scheme (light or dark)
                dataMenuStyles: "dark",     // Default menu style (dark, light, color, gradient, transparent)
                dataNavLayout: "vertical",  // Default navigation layout (vertical or horizontal)
                dataHeaderStyles: "transparent",  // Default header style (light, dark, color, gradient, transparent)
                dataVerticalStyle: "overlay", // Default vertical menu style (overlay, icon-text, detached, doublemenu)
                toggled: "",          // Default menu toggle state (open or closed)
                dataNavStyle: "",           // Default navigation style (menu-click, menu-hover, icon-click, icon-hover)
                dataPageStyle: "regular",   // Default page style (regular or classic)
                dataWidth: "default",     // Default page width (fullwidth or boxed)
                dataMenuPosition: "fixed",  // Default menu position (fixed or scrollable)
                dataHeaderPosition: "fixed",// Default header position (fixed or scrollable)
                loader:"disable",            / Default loader (enable or disable)
                iconOverlay: "",            // Default icon overlay state (empty)
                colorPrimaryRgb: "",        // Default primary color (RGB format)
                colorPrimary: "",           // Default primary color (space-separated RGB values)
                bodyBg1: "",                 // Default body background color1 (empty)
                bodyBg2: "",                 // Default body background color2 (empty)
                Light: "",                 // Default body background color (empty)
                Formcontrol: "",                 // Default body background color (empty)
                inputBorder: "",             // Default dark inputBorder color (empty)
                Graycolor: "",                 // Default dark background color (empty)
                bgImg: "",                  // Default background image (empty)
                iconText: "",               // Default icon text style (empty)
                body: {
                    class: ""               // Default body class (empty)
                }
            };

Note:

Make sure to clear the localStorage when changing the state to prevent it from affecting the applied state.

Disabling Switcher

Step1:

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

To remove switcher section as shown below.


                        <a
                        href="#!"
                        className="header-link switcher-icon"
                        data-hs-overlay="#hs-overlay-switcher"
                        aria-label="anchor"
                        >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="w-6 h-6 header-link-icon"
                            fill="none"
                            viewBox="0 0 24 24"
                            strokeWidth="1.5"
                            stroke="currentColor"
                        >
                            <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
                            />
                            <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
                            />
                        </svg>
                        </a>
Step2:

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


        import Switcher from "@/shared/layout-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

Step1:

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

To remove switcher section as shown below.


        import Switcher from "@/shared/layout-components/switcher/switcher"
        
        <Switcher />
Step2:

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


                import Landingswitcher from '@/shared/layout-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

Switcher Theme styles

                                    <html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close"></html>
Attribute Description
data-theme-mode="light" data-header-styles="light" data-menu-styles="light" To set the light theme
data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark" To set the Dark theme
dir="ltr" To set LTR version default
dir="rtl" To set LTR version to RTL version
data-nav-layout="vertical" To set menu layout to vertical
data-nav-layout="horizontal" data-nav-style="menu-click" To set menu layout to horizontal
data-nav-style="menu-click" To set navigation style to menu click - *Works same for both vertical and horizontal
data-nav-style="menu-hover" To set navigation style to menu hover - *Works same for both vertical and horizontal
data-nav-style="icon-click" To set navigation style to icon click - *Works same for both vertical and horizontal
data-nav-style="icon-hover" To set navigation style to icon hover - *Works same for both vertical and horizontal
data-page-style="regular" To set page style to Default
data-page-style="classic" To set page style to Classic
data-width="default" To set page width to Default Width
data-width="fullwidth" To set page width to Full Width
data-width="boxed" To set page width to Boxed
data-menu-position="fixed" To set menu position Fixed
data-menu-position="scrollable" To set menu position Scrollable
data-header-position="fixed" To set header position Fixed
data-header-position="scrollable" To set header position Scrollable
data-vertical-style="closed" To set sidemenu layout style Closed - *Does not work for horizontal
data-vertical-style="icontext" To set sidemenu layout style Icon Text - *Does not work for horizontal
data-vertical-style="overlay" To set sidemenu layout style Icon Overlay - *Does not work for horizontal
data-vertical-style="detached" To set sidemenu layout style Detached - *Does not work for horizontal
data-vertical-style="doublemenu" To set sidemenu layout style Double Menu - *Does not work for horizontal
loader="enable" To enable loader by default
Switcher Theme Colors

                                    <html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close"></html>
Attribute Description
data-menu-styles="light" To set the menu style to light
data-menu-styles="dark" To set the menu style to dark
data-menu-styles="color" To set the menu style to color
data-menu-styles="gradient" To set the menu style to gradient
data-menu-styles="transparent" To set the menu style to transparent
data-header-styles="light" To set the header style to light
data-header-styles="dark" To set the header style to dark
data-header-styles="color" To set the header style to color
data-header-styles="gradient" To set the header style to gradient
data-header-styles="transparent" To set the header style to transparent
bg-img="bgimg1" To set menu background image1
bg-img="bgimg2" To set menu background image2
bg-img="bgimg3" To set menu background image3
bg-img="bgimg4" To set menu background image4
bg-img="bgimg5" To set menu background image5
Icons Credit

Refer following links for usage:

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
Heroicons https://heroicons.com/
Images Credit

Refer following links for usage:

Images References
Vecteezy https://www.vecteezy.com/
Iconscout 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

Refer following links for usage:

Google Fonts https://fonts.google.com/
Sidemenu Icons

Refer following links for usage:

Heroicons https://heroicons.com/
USED PLUGINS & REFERENCE LINKS

All plugins runs through npm.

If you want new plugins : Install new plugin from npm then run npm run dev command.

Plugin Version URL
Next v15.1.1 https://nextjs.org/
React v19.0.0 https://legacy.reactjs.org/
Typescript v5.6.1 https://www.npmjs.com/package/typescript
Mui v6.3.0 https://www.npmjs.com/package/@mui/material
Redux v5.0.1 https://www.npmjs.com/package/redux
Firebase v11.1.0 https://firebase.google.com/
Swiper v11.1.15 https://swiperjs.com/get-started
Sweet alerts2 v11.15.5 https://sweetalert2.github.io/
Yet-another-react-lightbox v3.21.7 https://yet-another-react-lightbox.com/
Full Calendar v6.1.15 https://fullcalendar.io/
plyr-react v5.3.0 https://www.npmjs.com/package/plyr-react
React-leaflet v5.0.0 https://react-leaflet.js.org/
React-apexcharts v1.7.0 https://apexcharts.com/react-chart-demos/
React-chartjs-2 v5.3.0 https://www.npmjs.com/package/react-chartjs-2
Echarts-for-react v3.0.2 https://www.npmjs.com/package/echarts-for-react
Simplebar-react v3.3.0 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 v1.10.0 https://www.npmjs.com/package/react-range
React-select v5.9.0 https://www.npmjs.com/package/react-select
React-dropdownselect v4.11.4 https://www.npmjs.com/package/react-dropdown-select
React-gridjs v6.1.1 https://www.npmjs.com/package/gridjs-react
React-countup v6.5.3 https://www.npmjs.com/package/react-countup
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-listbox v1.2.13 https://www.npmjs.com/package/react-listbox
React-country-state-city v1.1.8 https://www.npmjs.com/package/react-country-state-city
Shepherd.js v14.3.0 https://www.npmjs.com/package/@reactour/tour
React-color-palette v7.3.0 https://www.npmjs.com/package/react-color-palette
REUSABLE FILES EXAMPLES
React 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.
1. You need to add these files to make it work.
Type URL
Plugin Link https://swiperjs.com/get-started/
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.
1. You need to add these files to make react-apexchart work. 





export const Linebasicseries = [{
    name: "Desktops",
    data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
  }]
  export const Linebasicoptions: any = {
    chart: {
      height: 320,
      type: 'line',
      zoom: {
        enabled: false
      }
    },
    colors: ['#5c67f7'],
    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',
        },
      }
    },
  }
Type URL
Plugin Link https://apexcharts.com/react-chart-demos/
React Suneditor :
React SunEditor is a lightweight, customizable WYSIWYG (What You See Is What You Get) editor for React, providing rich text editing features. It supports various formats, plugins, and is highly extensible for smooth integration into React applications.
1. You need to add these files to make basic react-suneditor work.
Type URL
Plugin 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.
1. You need to add these files to make basic react-flatpicker work.
Type URL
Plugin Link https://www.npmjs.com/package/react-datepicker
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.
1. You need to add these files to make basic react-select work. 




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" }
    ];
Type URL
Plugin Link https://www.npmjs.com/package/react-select
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.
1. You need to add below files to make basic gridjs table work. 





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 => {
	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);
	});
};
Type URL
Plugin Link https://www.npmjs.com/package/gridjs-react
Basic Table :
React Basic tables are simple, customizable table components for displaying structured data in a clean and responsive layout
1. You need to add these files to make basic default table work.





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 2023", number:"+1234-12340", status:"Completed", color:"primary"},
    {id:2, name:"Monika", date:"29,April 2023", number:"+1523-12459", status:"Failed", color:"secondary"},
    {id:3, name:"Madina", date:"30,Nov 2023", number:"+1982-16234", status:"Successful", color:"success"},
    {id:4, name:"Bhamako", date:"18,Mar 2023", number:"+1526-10729", status:"Pending", color:"warning"},
]
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.
1. You need to add these files to make react rating work.
Type URL
Plugin Link https://mui.com/material-ui/react-rating/
Alerts :
Preline Alerts are pre-styled, customizable alert components built with Tailwind CSS utility classes and provided by the Preline UI library. They make it easy to display important messages or notifications, offering built-in support for various styles (success, error, info, etc.), dismissible functionality, and seamless integration with React.
1. You need to add these files to make alerts work.
Buttons :
Preline Buttons are pre-styled, responsive button components built with Tailwind CSS utility classes. They offer a customizable solution for creating interactive buttons in React applications, supporting various styles, sizes, colors, and loading states. Preline Buttons also integrate easily with React,providing options for icons, hover effects, and more.
1. You need to add these files to make buttons work.
Badges :
Preline Badges are small, customizable components built with Tailwind CSS utility classes, designed to display labels, notifications, or counters in your React application. They support various styles, colors, and positions, making them perfect for highlighting important information or adding context to UI elements like buttons, links, or navigation items.
1. You need to add these files to make badges work.
Cards :
Preline Cards are versatile, customizable components built with Tailwind CSS, designed for displaying content in a flexible, structured layout. They offer options for images, headers, footers, and more, making them perfect for creating rich, responsive UI elements in your React application. Preline Cards integrate seamlessly with React and provide an easy way to organize and present content in a visually appealing way.
1. You need to add these files to make cards work.
Breadcrumb :
Preline Breadcrumb is a navigation component built with Tailwind CSS, designed to display a series of links that help users understand their location within a hierarchical structure. It offers customizable options for separators, active links, and responsive behavior, making it an ideal choice for creating intuitive and accessible navigation in React applications.
1. You need to add these files to make breadcrumb work.
Dropdown :
Preline Dropdown is a component built with Tailwind CSS that provides an easy way to create dropdown menus in React applications. It supports single or multi-level menus, alignment options, and customizable triggers (e.g., buttons or links), making it simple to build responsive, interactive dropdowns with minimal effort while maintaining a clean and modern design.
1. You need to add these files to make dropdown work.
Tooltips :
Preline Tooltips and Popovers are small, customizable pop-up elements built with Tailwind CSS, providing additional information when users hover over or focus on an element. Both can be integrated easily into React applications with support for various customization options, including positioning, trigger events, and animations. For Popovers, the --trigger: click property is used, making it possible to reuse the same component for both Tooltips and Popovers for a smoother, more efficient implementation.
1. You need to add these files to make tooltipss work.
Popover:





interface colortooltip2 {
    id:number;
    color:string;
    text:string;
    class:string;
    class1:string;
    class2:string;
}
export const colortooltip:colortooltip2[] = [
    {id:1, color:"primary-full", text:"Primary Tooltip", class:"[--placement:top]", class1:"primary", class2:"white"},
    {id:2, color:"secondary-full", text:"Secondary Tooltip", class:"[--placement:right]", class1:"secondary", class2:"white"},
    {id:3, color:"warning-full", text:"Warning Tooltip", class:"[--placement:bottom]", class1:"warning", class2:"white"},
    {id:4, color:"info-full", text:"Info Tooltip", class:"[--placement:left]", class1:"info", class2:"white"},
    {id:5, color:"success-full", text:"Success Tooltip", class:"[--placement:top]", class1:"success", class2:"white"},
    {id:6, color:"danger-full", text:"Danger Tooltip", class:"[--placement:bottom]", class1:"danger", class2:"white"},
    {id:7, color:"light", text:"Light Tooltip", class:"[--placement:bottom]", class1:"light", class2:"black"},
    {id:8, color:"dark", text:"Dark Tooltip", class:"[--placement:bottom]", class1:"black", class2:"white"},
]
Toast:
Preline Toast is a component built with Tailwind CSS for displaying lightweight, non-blocking notifications or messages in React applications. It offers features like auto-dismiss, customizable timing, and various styling options for success, error, or info messages, making it simple to provide responsive and visually appealing feedback to users in a clean and unobtrusive way.
1. You need to add these files to make toast work.
Accordions :
The Preline Accordion component allows you to display collapsible content panels in a stack, making it ideal for organizing large amounts of content in a compact and interactive layout. Built with TailwindCSS, it provides features like multiple or single panel expansion, customizable styling, and smooth animations, enabling you to create dynamic and space-efficient UIs in React applications.
1. You need to add these files to make accordions work.
Theme styles

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 )

Note-1: After making the change, run the npm run sass command.
.
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 :
--body-bg-rgb2 :
--input-border :
--gray-3 :
Note-1: After making the changes, run the npm run sass command.