React Version

Introduction

Veltrix is a fully featured, multi-purpose admin template built with Bootstrap 4, HTML5, CSS3 with React js. It’s a fully responsive and have a very clean user interface that comes with a huge collection of components, widgets, UI elements. We have maintained the best quality code for all versions so your developer can easily customize it as per your requirements. It is a professional and flexible admin template and can be used to build all kind of projects.

Veltrix is easily customizable and built with developer-friendly codes. It will help your team moving faster and saving development costs and valuable time.

If you’re a developer looking for an admin dashboard that is fully responsive with Bootstrap and React js then you are at the right place to start your project using Veltrix.

Veltrix contains lots of new design widgets with responsive on all screens. Also, there are 7+ different types of Layouts we have added and also preloader for loading. It is very easy to change any layout in your existing running application. We have written minimum SCSS and codes to increase performance.

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via our profile page or sent email on themesbrand@gmail.com

Structure

Extract the zip file you received after purchase and you would find the exact below files and folders:

├── public
├── src
    ├── assets
    ├── components
    ├── css
    ├── helpers
    ├── pages
    ├── routes
    ├── store
    ├── App.js
    ├── index.js
    ├── serviceWorker.js
    └── setupTests.js
├── package.json
└── package-lock.json

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Yarn / Node

    Make sure to have the Yarn or Node installed & running in your computer. If you already have installed yarn on your computer, you can skip this step. Node version must be greater then equal to 10.

Installation :

To setup the admin theme, follow below-mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running on your computer

  • Install Dependencies

    Open your terminal at the root directory of the project, go to your folder and enter the command yarn install or npm install. This would install all the required dependencies in the node_modules folder.

After you finished with the above steps, you can run the following commands to run the project locally or build for production use:

Command Description
npm start The development server is accessible at http://localhost:3000.

Layouts

Veltrix has 7 different layouts. You can launch your new website in any layouts quickly. You can change any layout in less then a minute!

Vertical
How to add new menu items/change menu items?

In order to add, change or remove menu items from the left side navigation, simply edit in file src/components/VerticalLayout/Sidebar.js.

How to change width?

In order to change the width of left side navigation bar, open a file src/assets/scss/_variables.scss and change the value of variable $sidebar-width. The default value is set to 250px.

How to use pre-built layouts?

Each of the layout options are provided as below with steps you would need to update INIT_STATE object in src/store/layout/reducer.js:

image
Light Sidebar & Topbar Dark
leftSideBarTheme: "light" and topbarTheme: "dark"
image
Compact Sidebar
leftSideBarType: "compact"
image
Icon Sidebar
leftSideBarType: "icon"
image
Boxed Layout
layoutWidth: "boxed"
image
Preloader
You can create loading state and manage inside render method to show and hide {this.state.loading ? : null} make sure to import import Loader from "../../components/Loader";
Horizontal

You would need to update INIT_STATE object in src/store/layout/reducer.js: src/store/layout/reducer.js file and update layoutType: "horizontal"

In order to add, change or remove any ui elements from the top bar, simply edit in the file components/HorizontalLayout/TopBar.js.

How to use pre-built layouts?

Each of the layout options are provided as below with steps you would need to update INIT_STATE object in src/store/layout/reducer.js:

image
Topbar Light
topbarTheme: "light"
image
Boxed Layout
layoutWidth: "boxed"
image
Preloader
You can create loading state and manage inside render method to show and hide {this.state.loading ? : null} make sure to import import Loader from "../../components/Loader";

Dark

In order to have dark mode enabled, open the the theme.scss file from src/assets/scss/theme.scss and comment light and RTL theme code and uncomment dark theme code.

// Dark Theme
@import "./bootstrap-dark.scss";
@import "./app-dark.scss";

RTL

In order to have RTL mode enabled, open the the theme.scss file from src/assets/scss/theme.scss and comment light and dark theme code and uncomment dark theme code.

// RTL Mode
@import "./bootstrap.scss";
@import "./app-rtl.scss";

Plugins

Here is the list of Plugins (with a link to the official documentation) which helped us to make admin better.

Plugins Url
Firebase https://www.npmjs.com/package/firebase
Apexcharts https://www.npmjs.com/package/apexcharts
availity-reactstrap-validation https://www.npmjs.com/package/availity-reactstrap-validation
Axios https://www.npmjs.com/package/axios
Bootstrap https://www.npmjs.com/package/bootstrap
chart.js https://www.npmjs.com/package/chart.js
chartist https://www.npmjs.com/package/chartist
draft-js https://www.npmjs.com/package/draft-js
echarts https://www.npmjs.com/package/echarts
echarts-for-react https://www.npmjs.com/package/echarts-for-react
fullcalendar https://www.npmjs.com/package/fullcalendar
fullcalendar-reactwrapper https://www.npmjs.com/package/fullcalendar-reactwrapper
google-maps-react https://www.npmjs.com/package/google-maps-react
lodash.clonedeep https://www.npmjs.com/package/lodash.clonedeep
mdbreact https://www.npmjs.com/package/mdbreact
metismenujs https://www.npmjs.com/package/metismenujs
node-sass https://www.npmjs.com/package/node-sass
react https://www.npmjs.com/package/react
react-apexcharts https://www.npmjs.com/package/react-apexcharts
react-bootstrap-editable https://www.npmjs.com/package/react-bootstrap-editable
react-bootstrap-sweetalert https://www.npmjs.com/package/react-bootstrap-sweetalert
react-bootstrap-table-next https://www.npmjs.com/package/react-bootstrap-table-next
react-bootstrap-table2-editor https://www.npmjs.com/package/react-bootstrap-table2-editor
react-chartist https://www.npmjs.com/package/react-chartist
react-chartjs-2 https://www.npmjs.com/package/react-chartjs-2
react-color https://www.npmjs.com/package/react-color
react-countdown-now https://www.npmjs.com/package/react-countdown-now
react-datepicker https://www.npmjs.com/package/react-datepicker
react-dom https://www.npmjs.com/package/react-dom
react-draft-wysiwyg https://www.npmjs.com/package/react-draft-wysiwyg
react-dropzone https://www.npmjs.com/package/react-dropzone
react-image-lightbox https://www.npmjs.com/package/react-image-lightbox
react-input-mask https://www.npmjs.com/package/react-input-mask
react-jvectormap https://www.npmjs.com/package/react-jvectormap
react-modal-video https://www.npmjs.com/package/react-modal-video
react-rangeslider https://www.npmjs.com/package/react-rangeslider
react-rating https://www.npmjs.com/package/react-rating
react-rating-tooltip https://www.npmjs.com/package/react-rating-tooltip
react-redux https://www.npmjs.com/package/react-redux
react-router-dom https://www.npmjs.com/package/react-router-dom
react-scripts https://www.npmjs.com/package/react-scripts
react-select https://www.npmjs.com/package/react-select
react-sparklines https://www.npmjs.com/package/react-sparklines
react-switch https://www.npmjs.com/package/react-switch
reactstrap https://www.npmjs.com/package/reactstrap
redux https://www.npmjs.com/package/redux
redux-form https://www.npmjs.com/package/redux-form
redux-saga https://www.npmjs.com/package/redux-saga
simplebar-react https://www.npmjs.com/package/simplebar-react
testing-library/jest-dom https://www.npmjs.com/package/@testing-library/jest-dom
testing-library/react https://www.npmjs.com/package/@testing-library/react
testing-library/user-event https://www.npmjs.com/package/@testing-library/user-event
vtaits/react-color-picker https://www.npmjs.com/package/@vtaits/react-color-picker