NexaDash

NexaDash – React (Vite) Admin Dashboard Template

This documentation is last updated on 12 July 2025

Thank you for purchasing this React template.

If you like this template, Please support us by rating this template with 5 stars

Installation -

1.- Install npm

It will create 'node_module' folder in this all dependency files will be install with this command. npm install

npm install

2.- Run Project

With is command file will be compiled and it will be loaded on local server `http://localhost:5173`. npm run dev

npm run dev

3.- Production Build

Builds the app for production to the `build` folder. Run the following command in your terminal. npm run build

npm run build

4.- Further help

You can learn more in the Vite Documentation To learn Vite.

Sass Compile -

1.- Install Sass

To execute our one-line script, we need to run the following command in the terminal npm run sass

npm run sass

Folder Directories -

assets

This folder contains all the assets of NexaDash template.
components

This folder component files for various template features.
elements

This folder contains all the elements files of NexaDash template.
layouts

This folder has all layouts used in the template.
pages

This folder has all pages for various template features.
images

This folder has all images used in the template.
css

CSS File

React Folder Structure -

public
- favicon.ico
src
- assets
  - css
  - icons
  - images
  - scss
  - vendor
- context
  - ThemeContext.jsx
  - ThemeDemo.jsx
- jsx
  - components
  - constant
  - element
  - layouts
  - pages
    - dashboard
    - account
    - apps
    - authentication
    - charts
    - ....
  - route
    - index.jsx
  - index.css
- services
- store
- App.jsx
- main.jsx
index.html
package-lock.json
package.json
vite.config.js

Theme Features -

src\context\ThemeContext.jsx

const body = document.querySelector("body");
body.setAttribute("data-typography", "inter");
body.setAttribute("data-theme-version", "light");
body.setAttribute("data-layout", "vertical");
body.setAttribute("data-primary", "color_1");
body.setAttribute("data-nav-headerbg", "color_1");
body.setAttribute("data-headerbg", "color_1");
body.setAttribute("data-sidebar-style", "overlay");
body.setAttribute("data-sidebarbg", "color_1");
body.setAttribute("data-sidebar-position", "fixed");
body.setAttribute("data-header-position", "fixed");

Color Theme -

So many color option available

color_1
color_2
color_3
color_4
color_5
color_6
color_7
color_8
color_9
color_10

const body = document.querySelector("body");
body.setAttribute("data-typography", "inter");				More Options => ["Inter, sans-serif" , "roboto" , "Open Sans" , "Helventivca" ]
body.setAttribute("data-theme-version", "light");			More Options => ["light" , "dark"]
body.setAttribute("data-layout", "vertical");				More Options => ["horizontal" , "vertical"]
body.setAttribute("data-primary", "color_1");				More Options => ["color_1," , "color_2," ..... "color_10"]
body.setAttribute("data-headerbg", "color_1");				More Options => ["color_1," , "color_2," ..... "color_10"]
body.setAttribute("data-nav-headerbg", "color_1");			More Options => ["color_1," , "color_2," ..... "color_10"]
body.setAttribute("data-sidebarbg", "color_1");				More Options => ["color_1," , "color_2," ..... "color_10"]
body.setAttribute("data-sidebar-style", "overlay");			More Options => ["full" , "mini" , "compact" , "modern" , "overlay" , "icon-hover"]
body.setAttribute("data-sidebar-position", "fixed");			More Options => ["static" , "fixed"]
body.setAttribute("data-header-position", "fixed");			More Options => ["static" , "fixed"]