Thank you so much for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us or submit a comment to this template. Thanks so much!
Dashbyte, a premium quality modern and clean React & Bootstrap 5 dashboard template using simplicity and minimal design. It is fully responsive built using SASS preprocessor, HTML5, CSS3. It uses most of the helper/utilities classes which are reusable class that makes the page faster and increases the speed of page time load.
This part of the doc will help you to quick start your project and will give you a basic idea about how this template work. For you to get started, open the template download package.
Please follow the below steps to install and setup all prerequisites:
Make sure to have the Node.js installed & running on your computer. If you already have installed Node on your computer, you can skip this step.
Installing Node.js via package manager
You can install node.js using different package manager of your choice by referring to this page: https://nodejs.org/en/download/package-manager/
Installing in MacOS and Windows
Download the macOS and windows Installer directly from the nodejs.org web site.
You're moments away to see the React template up and running in your local machine. First, go to the React folder where the package.json located. Please run the following command below.
$ npm installThis will download all dependencies defined in package.json file. Once it finished running the command, it will generate a folder name node_modules/ where you see downloaded files.
Now you're good to go in running the template and preview it in browser by running the command below.
$ npm startThe template is now up and running in your browser. Feel free to visit each page and familiarize the flow of it.
On your application’s root directory, The command you’ll run is:
$ npm run buildYou’ll notice this creates a new directory in your project called build.
This folder is essentially a super-compressed version of your program that has everything your browser needs to identify and run your app.
In this template, there are two skin mode, the light (as the default) and the dark skin.
You can simply set the template to dark skin as default by going to the file public/index.html. From the index.html simply edit the tag name html and add a new attribute data-skin with a value of dark. See example code below:
<html lang="en" data-skin="dark">Also, there are 3 skin mode (default,prime,dark) in the sidebar to choose from. You can simply set the sidebar skin by editing the file public/index.html. Simply edit the tag name html and add a new attribute data-sidebar with a value of your choise. See example below
<html lang="en" data-sidebar="prime">In order to add, change or remove menu items from the sidebar navigation, simple edit the file src/data/Menu.js
Below is an example of top level menu
{
"label": "Finance Monitoring",
"link": "/dashboard/finance",
"icon": "ri-pie-chart-2-line"
}Below is an example of menu with sub level menu
{
"label": "Media Gallery",
"icon": "ri-gallery-line",
"submenu": [
{
"label": "Music Stream",
"link": "/apps/gallery-music"
},
{
"label": "Video Stream",
"link": "/apps/gallery-video"
}
]
}In traditional websites, the browser requests a document from a web server, downloads and evaluates CSS and JavaScript assets, and renders the HTML sent from the server. When the user clicks a link, it starts the process all over again for a new page.
This enables faster user experiences because the browser doesn't need to request an entirely new document or re-evaluate CSS and JavaScript assets for the next page.
You can easily add, change or remove any route by simply making changes described below:
1. Open the file src/routes/ProtectedRoutes.js or src/routes/PublicRoutes.js and declare your component:
import NewPage from "../pages/NewPage.js"2. Make sure to add the entry for same with path and other properties like path and component same as other routes declared there.
{ path: "path/new-page", element: <NewPage /> }Below list are some package dependencies used in this template for your reference.
| Package | Repository |
|---|---|
| @fullcalendar/react | https://github.com/fullcalendar/fullcalendar-react |
| @react-jvectormap/core | https://github.com/kadoshms/react-jvectormap |
| gridjs-react | https://github.com/grid-js/gridjs-react |
| react-apexcharts | https://github.com/apexcharts/react-apexcharts |
| react-bootstrap | https://github.com/react-bootstrap/react-bootstrap |
| react-chartjs-2 | https://github.com/reactchartjs/react-chartjs-2 |
| react-color | https://github.com/casesandberg/react-color |
| react-datepicker | https://github.com/Hacker0x01/react-datepicker |
| react-leaflet | https://github.com/PaulLeCam/react-leaflet |
| react-perfect-scrollbar | https://github.com/goldenyz/react-perfect-scrollbar |
| react-quill | https://github.com/zenoamaro/react-quill |
| react-select | https://github.com/JedWatson/react-select/tree/master |
You can request for support via email or themeforest item comments.
We will assist you any problem you encounter while buidling your dashboard via this template
We use request help form in comments and email to manage customer support. Soon, as we grow, we will invest and find the best customer support system we can use to serve you better.
For the meantime, submit a help request to the link given for any issues and concerns that you have. Don't worry, we will respond to you as quickly as we can. Thank you!