Documentation

Tixia - React (Vite) Ticketing Admin Dashboard Template

Tixia

Tixia - Fitness Admin Dashboard Template

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

4.- 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 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
    • favicon.ico
  • src
    • assets
      • 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
    • context
      • ThemeContext.js
    • jsx
      • components
        • AppsMenu
        • bootstrap
        • charts
        • chatBox
        • Dashboard
        • Forms
        • PluginsMenu
        • table
      • layouts
        • nav
          • Header.jsx
          • NavHader.jsx
          • SideBar.jsx
        • ChatBox
        • EventSidebar.jsx
        • Footer.jsx
        • PageTitle.jsx
        • Setting.jsx
      • pages
        • Error400.jsx
        • Error403.jsx
        • Error404.jsx
        • Error500.jsx
        • Error503.jsx
        • LockScreen.jsx
        • Login.jsx
        • Registration.jsx
        • Widget.jsx
      • index.jsx
    • services
      • AuthService.jsx
      • AxiosInstance.jsx
      • PostsService.jsx
    • store
      • actions
      • reducers
      • selectors
      • store.js
    • App.jsx
    • main.jsx
  • index.html
  • package-lock.json
  • package.json
  • vite.config.js

Theme Features -

Layout is controlled by layout settings inside 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-sibebarbg = "color_3"
  data-sidebar-position = "fixed"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_1"
  direction = "ltr"
>

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
  • color_11
  • color_12
  • color_13
  • color_14
  • color_15
<body
  data-typography: "poppins",  			More Options => ["poppins" , "roboto" , "Open Sans" , "Helventivca" ]
  data-theme-version: "light",       	More Options => ["light" , "dark"]
  data-layout: "horizontal",   			More Options => ["horizontal" , "vertical"]
  data-headerbg: "color_3",				More Options => ["color_1," , "color_2," ..... "color_15"]
  data-nav-headerbg: "color_2",			More Options => ["color_1," , "color_2," ..... "color_15"]
  data-sibebarbg: "color_11",			More Options => ["color_1," , "color_2," ..... "color_15"]
  data-sidebar-style: "compact",		More Options => ["full" , "mini" , "compact" , "modern" , "overlay" , "icon-hover"]
  data-sidebar-position: "static",		More Options => ["static" , "fixed"]
  data-header-position: "fixed",		More Options => ["static" , "fixed"]
  data-container: "full",				More Options => ["full" , "wide" , "wide-box"]
  data-primary: "color_1",				More Options => ["color_1," , "color_2," ..... "color_15"]	
>


<!-- layout 1  -->
<body
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_9"
  data-headerbg = "color_1"
  data-sidebar-style = "full"
  data-sibebarbg = "color_1"
  data-sidebar-position = "static"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_9"
  direction = "ltr"
>

<!-- layout 2  -->
<body
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_7"
  data-headerbg = "color_1"
  data-sidebar-style = "compact"
  data-sibebarbg = "color_7"
  data-sidebar-position = "fixed"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_7"
  direction = "ltr"
>

<!-- layout 3  -->
<body
  data-typography = "poppins"
  data-theme-version = "dark"
  data-layout = "vertical"
  data-nav-headerbg = "color_5"
  data-headerbg = "color_1"
  data-sidebar-style = "modern"
  data-sibebarbg = "color_5"
  data-sidebar-position = "static"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_5"
  direction = "ltr"
>

<!-- layout 4  -->
<body
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_1"
  data-headerbg = "color_12"
  data-sidebar-style = "icon-hover"
  data-sibebarbg = "color_12"
  data-sidebar-position = "fixed"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_12"
  direction = "ltr"
>

<!-- layout 5  -->
<body
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_12"
  data-headerbg = "color_12"
  data-sidebar-style = "full"
  data-sibebarbg = "color_13"
  data-sidebar-position = "fixed"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_12"
  direction = "ltr"
>

<!-- layout 6  -->
<body
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "horizontal"
  data-nav-headerbg = "color_1"
  data-headerbg = "color_1"
  data-sidebar-style = "compact"
  data-sibebarbg = "color_1"
  data-sidebar-position = "static"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_15"
  direction = "ltr"
>

<!-- layout 7  -->
<body
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "horizontal"
  data-nav-headerbg = "color_7"
  data-headerbg = "color_7"
  data-sidebar-style = "modern"
  data-sibebarbg = "color_1"
  data-sidebar-position = "static"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_7"
  direction = "ltr"
>

<!-- layout 7  -->
<body
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_1"
  data-headerbg = "color_14"
  data-sidebar-style = "modern"
  data-sibebarbg = "color_1"
  data-sidebar-position = "static"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_14"
  direction = "ltr"
>

Credits -

Index.js Structure

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
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 -

Samar | Creative Agency React NextJs Template

CryptoZone | React Crypto Trading Admin Dashboard Template

Travl : React Redux Hotel Admin Dashboard Template

FoodDesk - React Food Delivery Admin Dashboard Template

Lezato : React Redux Restaurant Admin Template

Boltz - React Crypto Admin and Dashboard Template

Job Board - Job Board React Template

Zenix - React Redux Crypto Admin Dashboard

MOPHY - Payment React Redux Admin Dashboard

Karciz - React Redux Ticketing Admin Dashboard

KingArchitect | Property Portfolio & Real Estate React Template - No JQuery

Industry - Factory & Industrial React Template

Umang Academy : Kindergarten, Kids Play School React Template

Uena - React Saas Admin Dashboard Template

MetroAdmin - Bootstrap, Laravel & React Admin Dashboard

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

  • In Order To Ensure Your Website Is Live, We Will Customize
    The Template According To Your Requirements And Upload It to the Server.
rahulxarma dexignzones@gmail.com

Version History - #back to top

v1.0 - 14 December 2024
  • New - Created & Upload Tixia