Salero
Salero React (Vite) Restaurant Admin Template
Salero is a popular open source WebApp template for admin dashboards template. It utilizes all of the react-bootstrap components in design.
Thank you for purchasing this React template.
If you like this template, Please support us by rating this template with 5 stars
Installation & Setup -
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.- Note
To get more help on the React.js checkout React
5.- Further help
You can learn more in the Vite Documentation To learn Vite.
Sass Compile -
1.- Install Sass
Sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install node-sass run the following command in your terminal: npm add -D sass
npm add -D sass
2.- Write Sass Command
Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this:
In the scripts section add an scss command
"scripts": {
"sass": "sass --watch src/assets/scss/main.scss src/assets/css/style.css",
},
3.- Run the Script
To execute our one-line script, we need to run the following command in the terminal: npm run sass
npm run sass
Folder Directories -
- public
- src
- assets
- css
- style.css
- icons
- avasta
- feather
- flaticon
- font-awesome-old
- helveticaNeue
- icomoon
- line-awesome
- material-design-iconic-font
- simple-line-icons
- themify-icons
- images
- avatar
- big
- browser
- card
- contact
- demo
- pattern
- product
- profile
- tab
- table
- scss
- abstracts
- base
- components
- app
- charts
- forms
- ico
- map
- tables
- uc
- ui
- widget
- layout
- footer
- header
- rtl
- sidebar
- theme
- typography
- version-dark
- version-transparent
- pages
- main.scss
- css
- context
- ThemeContext.jsx
- jsx
- components
- layouts
- nav
- Header.jsx
- NavHader.jsx
- SideBar.jsx
- ChatBox.jsx
- Footer.jsx
- PageTitle.jsx
- nav
- pages
- apps
- bootstrap
- Accordion.jsx
- Alert.jsx
- Badge.jsx
- Button.jsx
- ButtonGroup.jsx
- Card.jsx
- Grid.jsx
- ....
- charts
- dashboard
- ecommerce
- error
- Error400.jsx
- Error403.jsx
- Error404.jsx
- Error500.jsx
- Error503.jsx
- forms
- plugins
- svgicon
- table
- widget
- Login.jsx
- Registration.jsx
- index.jsx
- assets
- services
- AuthService.js
- AxiosInstance.js
- PostsService.js
- store
- actions
- reducers
- selectors
- store.js
- App.jsx
- index.jsx
Theme Features -
Layout is controlled by settings object Layout Settings inside public/index.html
<!-- Default layout --> <body data-typography="poppins" data-theme-version="light" data-layout="vertical" data-nav-headerbg="color_1" data-headerbg="color_1" data-sidebar-style="full" data-sidebarbg="color_2" data-sidebar-position="fixed" data-header-position="fixed" data-container="wide" direction="ltr" data-primary="color_1" >
Color Theme -
So many color option available
Credits -
-
Vite v6.1.0
-
Google fonts are used in the template.
-
Font Awesome
-
All Images are used
-
Bootstrap framework
-
Datatables
-
React Table
-
Full Calendar
-
Sparkline
-
Chartjs
-
Apexchart
-
Sweet Alert
-
Light Gallery
-
CkEditor
-
Uc Select2
-
Router
Project Main Features -
- Router
- Timeline
- CkEditor
- Form Examples
- Many Charts Options
- Form Validation
- Advanced Form Elements
- Form Wizard
- Social
- Bootstrap
- Datatable
- Table Sorting
- React Table
- Date Picker
- Sweetalert
- Toaster
- Light Gallery
- Scroll
- Restaurant
main.jsx Structure
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom';
import {Provider} from 'react-redux';
import {store} from './store/store';
import ThemeContext from "./context/ThemeContext";
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Provider store = {store}>
<BrowserRouter basename='/'>
<ThemeContext>
<App />
</ThemeContext>
</BrowserRouter>
</Provider>
</React.StrictMode>
)
Create a Page
import React from "react";
export function MyPage() {
return(
<h1>Hello!</h1>
)
}
Our Products -
Do You Need Help To Customization
After Purchase A Template...
You Will Start Customizing According Your Requirement
BUT What If You Don't Know
SOLUTION IS HIRE DexignZone
Hire Same Team For Quality Customization
- We Will Customize Template According To Your Requirement
- We Will Upload On Server And Make Sure Your Website is Live
Version History -
10 May 2025
- New - Created & Upload Salero